账号管理样式优化

src/views/pass_records/components/ysgz_pass_records.vue

@@ -212,7 +212,7 @@
           {{ indexMethod(scope.$index) }}
         </template>
       </el-table-column>
-      <template v-for="(aItem, aIndex) in accessColumnsFieldList">
+      <template v-for="(aItem, aIndex) in columnsFieldList">
         <el-table-column :key="aItem.field" :label="aItem.label" align="center" :width="aItem.width">
           <template slot-scope="scope">
             <template v-if="['photo', 'xp'].indexOf(aItem.field) > -1">
@@ -470,7 +470,7 @@ export default {
           { id: '3', name: '二维码' }
         ]
       },
-      accessColumnsFieldList: [
+      columnsFieldList: [
         {
           label: '现场照片',
           field: 'photo',
@@ -647,7 +647,7 @@ export default {
       return `calc(100vh - ${this.isOpenSearch ? '370px' : '320px'})`
     },
     getSearchList() {
-      return this.accessColumnsFieldList.filter(v => {
+      return this.columnsFieldList.filter(v => {
         if (v.searchField == 'username') {
           if (checkRole([99])) {
             return false

src/views/user_manage/index.vue

@@ -1,161 +1,165 @@
 <template>
   <div class="app-container">
-    <!--操作区-->
-    <el-button
-      type="primary"
-      icon="el-icon-plus"
-      class="margin-left"
-      @click="create"
-    >添加账号</el-button>
-    <el-button
-      type="primary"
-      icon="el-icon-download"
-      class="margin-left"
-      @click="download"
-    >下载模板</el-button>
-    <a
-      href="javascript:;"
-      class="file"
-    >批量导入<input
-      ref="file"
-      type="file"
-      name="file"
-      @change="upload($event)"
-    ></a>
-    <el-button
-      v-if="checkRole([1, 2])"
-      type="primary"
-      icon="el-icon-download"
-      class="margin-left"
-      @click="batchDownloadUserList"
-    >下载账号列表</el-button>
-    <!--搜索区-->
-    <el-select
-      v-model="page.data.username"
-      filterable
-      clearable
-      placeholder="请选择所属账号"
-      class="margin-left input"
-    >
-      <el-option
-        v-for="item in user_list"
-        :key="item.id"
-        :label="item.username"
-        :value="item.username"
-      />
-    </el-select>
-    <el-input
-      v-model="page.data.name"
-      placeholder="请输入姓名"
-      class="margin-left input"
-    />
-    <el-input
-      v-model="page.data.phone"
-      placeholder="请输入手机号"
-      class="margin-left input"
-    />
-    <el-select
-      v-model="page.data.provinceId"
-      filterable
-      clearable
-      placeholder="请选择省份"
-      class="margin-left input"
-      :disabled="checkRole([2])"
-      @change="chooseProvinceSearch"
-    >
-      <el-option
-        v-for="item in province_list_search"
-        :key="item.areaCodeId"
-        :label="item.name"
-        :value="item.areaCodeId"
-      />
-    </el-select>
-    <el-select
-      v-model="page.data.cityId"
-      filterable
-      clearable
-      placeholder="请选择城市"
-      class="margin-left input"
-      @change="chooseCitySearch"
-    >
-      <el-option
-        v-for="item in city_list_search"
-        :key="item.areaCodeId"
-        :label="item.name"
-        :value="item.areaCodeId"
-      />
-    </el-select>
-    <!-- <el-select
-      filterable
-      clearable
-      v-model="page.data.areaId"
-      placeholder="请选择区域"
-      class="margin-left input"
-    >
-      <el-option
-        v-for="item in area_list_search"
-        :key="item.areaCodeId"
-        :label="item.name"
-        :value="item.areaCodeId"
-      >
-      </el-option>
-    </el-select> -->
-    <el-select
-      v-model="page.data.type"
-      filterable
-      clearable
-      placeholder="请选择权限级别"
-      class="margin-left input"
-    >
-      <el-option
-        v-for="item in type_list"
-        :key="item.id"
-        :label="item.name"
-        :value="item.id"
-      />
-    </el-select>
-    <el-select
-      v-show="page.data.provinceId"
-      v-model="page.data.tagId"
-      filterable
-      clearable
-      placeholder="请选择账号类别"
-      class="margin-left input"
-    >
-      <el-option
-        v-for="item in tag_list"
-        :key="item.id"
-        :label="item.name"
-        :value="item.id"
-      />
-    </el-select>
+    <div class="operation-box">
+      <!--操作区-->
+      <div class="operation-box_btn">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          @click="create"
+        >添加账号</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-download"
+          @click="download"
+        >下载模板</el-button>
+        <a
+          href="javascript:;"
+          class="file"
+        >批量导入<input
+          ref="file"
+          type="file"
+          name="file"
+          @change="upload($event)"
+        ></a>
+        <el-button
+          v-if="checkRole([1, 2])"
+          type="primary"
+          icon="el-icon-download"
+          @click="batchDownloadUserList"
+        >下载账号列表</el-button>
+      </div>
+      <div class="operation-box_search">
+        <!--搜索区-->
+        <el-select
+          v-model="page.data.username"
+          filterable
+          clearable
+          placeholder="请选择所属账号"
+          class="search-input"
+        >
+          <el-option
+            v-for="item in user_list"
+            :key="item.id"
+            :label="item.username"
+            :value="item.username"
+          />
+        </el-select>
+        <el-input
+          v-model="page.data.name"
+          placeholder="请输入姓名"
+          class="search-input"
+        />
+        <el-input
+          v-model="page.data.phone"
+          placeholder="请输入手机号"
+          class="search-input"
+        />
+        <el-select
+          v-model="page.data.provinceId"
+          filterable
+          clearable
+          placeholder="请选择省份"
+          class="search-input"
+          :disabled="checkRole([2])"
+          @change="chooseProvinceSearch"
+        >
+          <el-option
+            v-for="item in province_list_search"
+            :key="item.areaCodeId"
+            :label="item.name"
+            :value="item.areaCodeId"
+          />
+        </el-select>
+        <el-select
+          v-model="page.data.cityId"
+          filterable
+          clearable
+          placeholder="请选择城市"
+          class="search-input"
+          @change="chooseCitySearch"
+        >
+          <el-option
+            v-for="item in city_list_search"
+            :key="item.areaCodeId"
+            :label="item.name"
+            :value="item.areaCodeId"
+          />
+        </el-select>
+        <!-- <el-select
+          filterable
+          clearable
+          v-model="page.data.areaId"
+          placeholder="请选择区域"
+          class="search-input"
+        >
+          <el-option
+            v-for="item in area_list_search"
+            :key="item.areaCodeId"
+            :label="item.name"
+            :value="item.areaCodeId"
+          >
+          </el-option>
+        </el-select> -->
+        <el-select
+          v-model="page.data.type"
+          filterable
+          clearable
+          placeholder="请选择权限级别"
+          class="search-input"
+        >
+          <el-option
+            v-for="item in type_list"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+        <el-select
+          v-show="page.data.provinceId"
+          v-model="page.data.tagId"
+          filterable
+          clearable
+          placeholder="请选择账号类别"
+          class="search-input"
+        >
+          <el-option
+            v-for="item in tag_list"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
 
-    <el-select
-      v-model="page.data.placeType"
-      filterable
-      clearable
-      placeholder="请选择场景值"
-      class="margin-left input"
-    >
-      <el-option
-        v-for="item in scene_list"
-        :key="item.id"
-        :label="item.name"
-        :value="item.id"
-      />
-    </el-select>
-    <el-button
-      type="primary"
-      icon="el-icon-search"
-      class="margin-left"
-      @click="fetchData"
-    >搜索</el-button>
+        <el-select
+          v-model="page.data.placeType"
+          filterable
+          clearable
+          placeholder="请选择场景值"
+          class="search-input"
+        >
+          <el-option
+            v-for="item in scene_list"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          class="search-btn"
+          @click="fetchData"
+        >搜索</el-button>
+      </div>
+    </div>
     <!--主表格-->
     <el-table
       ref="table_form"
       v-loading="listLoading"
       class="table"
       :data="list"
+      :height="getTableFixedHeight"
       element-loading-text="Loading"
       border
       fit
@@ -166,173 +170,162 @@
           {{ indexMethod(scope.$index) }}
         </template>
       </el-table-column>
-      <el-table-column label="账号名称" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.username | matchNull }}
-        </template>
-      </el-table-column>
-      <el-table-column label="管理员姓名" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.name | matchNull }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="管理员手机号" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.phone | matchNull }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="省-市-区-街道"
-        align="center"
-        show-overflow-tooltip
-      >
-        <template slot-scope="scope">
-          {{ scope.row.provinceName | matchNull }}-{{
-            scope.row.cityName | matchNull
-          }}-{{ scope.row.areaName | matchNull }}-{{
-            scope.row.streetName | matchNull
-          }}
-        </template>
-      </el-table-column>
-      <el-table-column label="详细地址" align="center" show-overflow-tooltip>
-        <template slot-scope="scope">
-          {{ scope.row.address | matchNull }}
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="权限级别" align="center">
-        <template slot-scope="scope">
-          <el-tag
-            v-show="scope.row.type === 1"
-            effect="dark"
-            type="success"
-          >超级管理员</el-tag>
-          <el-tag
-            v-show="scope.row.type === 2"
-            effect="dark"
-            type=""
-          >省级超管员</el-tag>
-          <el-tag v-show="scope.row.type === 3" type="">省级管理员</el-tag>
-          <el-tag v-show="scope.row.type === 4" type="">市级管理员</el-tag>
-          <el-tag v-show="scope.row.type === 5" type="">区级管理员</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="账号类别" align="center">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.tagName" effect="plain" type="success">
-            {{ scope.row.tagName }}
-          </el-tag>
-          <el-tag v-else effect="dark" type="success">省级超管</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="导出权限" align="center">
-        <template slot-scope="scope">
-          <el-tag
-            v-if="scope.row.isOut == 1"
-            effect="plain"
-            type="success"
-          >开启</el-tag>
-          <el-tag
-            v-else-if="scope.row.isOut == 2"
-            effect="plain"
-            type="info"
-          >停用</el-tag>
-          <el-tag v-else effect="plain" type="info">未知</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="是否脱敏" align="center">
-        <template slot-scope="scope">
-          <el-tag
-            v-if="scope.row.isHideImportant == 1"
-            effect="plain"
-            type="info"
-          >脱敏</el-tag>
-          <el-tag
-            v-else-if="scope.row.isHideImportant == 2"
-            effect="plain"
-            type="success"
-          >不脱敏</el-tag>
-          <el-tag v-else effect="plain" type="info">未知</el-tag>
-        </template>
-      </el-table-column>
+      <template v-for="(aItem, aIndex) in columnsFieldList">
+        <el-table-column :key="aItem.field" :label="aItem.label" align="center" :width="aItem.width">
+          <template slot-scope="scope">
+            <template v-if="['stateCityDistrictStreet'].indexOf(aItem.field) > -1">
+              {{ scope.row.provinceName | matchNull }}-{{
+                scope.row.cityName | matchNull
+              }}-{{ scope.row.areaName | matchNull }}-{{
+                scope.row.streetName | matchNull
+              }}
+            </template>
+            <template v-else-if="['type'].indexOf(aItem.field) > -1">
+              <el-tag
+                v-show="scope.row.type === 1"
+                effect="dark"
+                type="success"
+              >超级管理员</el-tag>
+              <el-tag
+                v-show="scope.row.type === 2"
+                effect="dark"
+                type=""
+              >省级超管员</el-tag>
+              <el-tag v-show="scope.row.type === 3" type="">省级管理员</el-tag>
+              <el-tag v-show="scope.row.type === 4" type="">市级管理员</el-tag>
+              <el-tag v-show="scope.row.type === 5" type="">区级管理员</el-tag>
+            </template>
+            <template v-else-if="['tagName'].indexOf(aItem.field) > -1">
+              <el-tag v-if="scope.row.tagName" effect="plain" type="success">
+                {{ scope.row.tagName }}
+              </el-tag>
+              <el-tag v-else effect="dark" type="success">省级超管</el-tag>
+            </template>
+            <template v-else-if="['isOut'].indexOf(aItem.field) > -1">
+              <el-tag
+                v-if="scope.row.isOut == 1"
+                effect="plain"
+                type="success"
+              >开启</el-tag>
+              <el-tag
+                v-else-if="scope.row.isOut == 2"
+                effect="plain"
+                type="info"
+              >停用</el-tag>
+              <el-tag v-else effect="plain" type="info">未知</el-tag>
+            </template>
+            <template v-else-if="['isHideImportant'].indexOf(aItem.field) > -1">
+              <el-tag
+                v-if="scope.row.isHideImportant == 1"
+                effect="plain"
+                type="info"
+              >脱敏</el-tag>
+              <el-tag
+                v-else-if="scope.row.isHideImportant == 2"
+                effect="plain"
+                type="success"
+              >不脱敏</el-tag>
+              <el-tag v-else effect="plain" type="info">未知</el-tag>
+            </template>
+            <template v-else-if="['status'].indexOf(aItem.field) > -1">
+              <el-tag
+                v-if="scope.row.status"
+                effect="dark"
+                style="border: 1px solid #409EFF;background: #fff;color: #409EFF;"
+              >
+                有效
+              </el-tag>
+              <el-tag
+                v-else
+                effect="dark"
+                style="border: 1px solid #E7EBF4;background: #fff;color: #A8AEBC;"
+              >
+                失效
+              </el-tag>
+            </template>
+            <template v-else-if="['placeType'].indexOf(aItem.field) > -1">
+              <el-tag
+                v-if="scope.row.placeType === 0"
+                type="primary"
+                effect="plain"
+              >通用场景</el-tag>
+              <el-tag
+                v-else-if="scope.row.placeType === 1"
+                type="warning"
+                effect="plain"
+              >预约场景</el-tag>
+              <el-tag
+                v-else-if="scope.row.placeType === 2"
+                type="success"
+                effect="plain"
+              >楼宇场景</el-tag>
+              <el-tag
+                v-else-if="scope.row.placeType === 3"
+                type="info"
+                effect="plain"
+              >学校场景</el-tag>
+            </template>
+            <template v-else-if="['regularCode'].indexOf(aItem.field) > -1">
+              <el-image
+                style="width: 70px; height: 70px"
+                fit="cover"
+                :src="regularCode(scope.row)"
+                :preview-src-list="[regularCode(scope.row)]"
+              >
+                <div slot="error" style="width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;">
+                  暂无照片
+                </div>
+              </el-image>
+            </template>
+            <template v-else-if="['zfbRegularCode'].indexOf(aItem.field) > -1">
+              <el-image
+                style="width: 70px; height: 70px"
+                fit="cover"
+                :src="zfbRegularCode(scope.row)"
+                :preview-src-list="[zfbRegularCode(scope.row)]"
+              >
+                <div slot="error" style="width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;">
+                  暂无照片
+                </div>
+              </el-image>
+            </template>
+            <template v-else-if="['regular'].indexOf(aItem.field) > -1">
+              <el-image
+                style="width: 70px; height: 70px"
+                fit="cover"
+                :src="regular(scope.row)"
+                :preview-src-list="[regular(scope.row)]"
+              >
+                <div slot="error" style="width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;">
+                  暂无照片
+                </div>
+              </el-image>
+            </template>
+            <template v-else-if="['zfbRegular'].indexOf(aItem.field) > -1">
+              <el-image
+                style="width: 70px; height: 70px"
+                fit="cover"
+                :src="zfbRegular(scope.row)"
+                :preview-src-list="[zfbRegular(scope.row)]"
+              >
+                <div slot="error" style="width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;">
+                  暂无照片
+                </div>
+              </el-image>
+            </template>
+            <template v-else>
+              {{ scope.row[aItem.field] | matchNull }}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
       <el-table-column
-        class-name="status-col"
-        label="场景值"
-        width="130px"
         align="center"
+        prop=""
+        fixed="right"
+        label="操作区"
+        width="150"
       >
-        <template slot-scope="scope">
-          <el-tag
-            v-if="scope.row.placeType === 0"
-            type="primary"
-            effect="plain"
-          >通用场景</el-tag>
-          <el-tag
-            v-else-if="scope.row.placeType === 1"
-            type="warning"
-            effect="plain"
-          >预约场景</el-tag>
-          <el-tag
-            v-else-if="scope.row.placeType === 2"
-            type="success"
-            effect="plain"
-          >楼宇场景</el-tag>
-          <el-tag
-            v-else-if="scope.row.placeType === 3"
-            type="info"
-            effect="plain"
-          >学校场景</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" show-overflow-tooltip>
-        <template slot-scope="scope">
-          {{ scope.row.createTime }}
-        </template>
-      </el-table-column>
-      <el-table-column label="微信通用/内宾码" align="center">
-        <template slot-scope="scope">
-          <el-image
-            style="width: auto; height: 70px;line-height: 70px;"
-            :src="regularCode(scope.row)"
-            :preview-src-list="[regularCode(scope.row)]"
-          >
-            <div slot="error" class="image-slot">暂无照片</div>
-          </el-image>
-        </template>
-      </el-table-column>
-      <el-table-column label="支付宝通用/内宾码" align="center">
-        <template slot-scope="scope">
-          <el-image
-            style="width: auto; height: 70px;line-height: 70px;"
-            :src="zfbRegularCode(scope.row)"
-            :preview-src-list="[zfbRegularCode(scope.row)]"
-          >
-            <div slot="error" class="image-slot">暂无照片</div>
-          </el-image>
-        </template>
-      </el-table-column>
-      <el-table-column label="微信员工/外宾码" align="center">
-        <template slot-scope="scope">
-          <el-image
-            style="width: auto; height: 70px;line-height: 70px;"
-            :src="regular(scope.row)"
-            :preview-src-list="[regular(scope.row)]"
-          >
-            <div slot="error" class="image-slot">暂无照片</div>
-          </el-image>
-        </template>
-      </el-table-column>
-      <el-table-column label="支付宝员工/外宾码" align="center">
-        <template slot-scope="scope">
-          <el-image
-            style="width: auto; height: 70px;line-height: 70px;"
-            :src="zfbRegular(scope.row)"
-            :preview-src-list="[zfbRegular(scope.row)]"
-          >
-            <div slot="error" class="image-slot">暂无照片</div>
-          </el-image>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="" label="操作区" width="200">
         <template slot-scope="scope">
           <el-button
             size="small"
@@ -2414,10 +2407,99 @@ export default {
       pushField: [],
       doUpload: '',
       placeAreaCode_list: [], // 场所码所属区域
-      row: {}
+      row: {},
+
+      columnsFieldList: [
+        {
+          label: '所属账号',
+          field: 'username',
+          width: 120,
+          isShow: true,
+          roles: [1, 2],
+          needSearch: true,
+          searchField: 'username',
+          searchType: 'Select',
+          searchEnum: {
+            field: 'user_list',
+            labelField: 'username',
+            valueField: 'username'
+          }
+        }, {
+          label: '管理员姓名',
+          field: 'name',
+          width: 100,
+          isShow: true,
+          needSearch: true,
+          searchField: 'name',
+          searchType: 'Input'
+        }, {
+          label: '管理员手机号',
+          field: 'phone',
+          width: 120,
+          isShow: true,
+          needSearch: true,
+          searchField: 'phone',
+          searchType: 'Input'
+        }, {
+          label: '省-市-区-街道',
+          field: 'stateCityDistrictStreet',
+          width: 120
+        }, {
+          label: '详细地址',
+          field: 'address',
+          width: 120
+        }, {
+          label: '权限级别',
+          field: 'type',
+          width: 120
+        }, {
+          label: '账号类别',
+          field: 'tagName',
+          width: 100
+        }, {
+          label: '导出权限',
+          field: 'isOut',
+          width: 100
+        }, {
+          label: '是否脱敏',
+          field: 'isHideImportant',
+          width: 100
+        }, {
+          label: '场景值',
+          field: 'placeType',
+          width: 100
+        }, {
+          label: '创建时间',
+          field: 'createTime',
+          width: 150
+        }, {
+          label: '微信通用/内宾码',
+          field: 'regularCode',
+          width: 140,
+          isShow: true
+        }, {
+          label: '支付宝通用/内宾码',
+          field: 'zfbRegularCode',
+          width: 140,
+          isShow: true
+        }, {
+          label: '微信员工/外宾码',
+          field: 'regular',
+          width: 140,
+          isShow: true
+        }, {
+          label: '支付宝员工/外宾码',
+          field: 'zfbRegular',
+          width: 140,
+          isShow: true
+        }
+      ]
     }
   },
   computed: {
+    getTableFixedHeight() {
+      return `calc(100vh - 315px)`
+    },
     regularCode() {
       return function(row) {
         if (row.codeType.indexOf('0') > -1) {
@@ -3328,7 +3410,7 @@ export default {
 </script>
 <style scoped lang="scss">
 .table {
-  margin-top: 15px;
+  margin-top: 10px;
 }
 .display-config-layout {
   display: flex;
@@ -3372,7 +3454,7 @@ export default {
 }
 /*批量导入按钮*/
 .file {
-  margin: 10px 0 0 10px;
+  margin: 10px 10px 0 10px;
   position: relative;
   background: #d0eeff;
   border: 1px solid #99d3f5;
@@ -3383,6 +3465,7 @@ export default {
   color: #1e88c7;
   text-decoration: none;
   text-indent: 0;
+  font-size: 14px;
 }
 .file input {
   position: absolute;