访客记录列表样式优化

src/views/machine_list/components/ysgz_machine_list.vue

@@ -39,7 +39,7 @@
           v-model="page.data.sn"
           filterable
           clearable
-          placeholder="请选择设备编号"
+          placeholder="请选择设备SN"
           class="search-input"
         >
           <el-option
@@ -504,7 +504,7 @@
           <el-form-item
             v-if="checkRole([1, 2]) || (checkRole([5]) && placeType === 2)"
             style="flex: 0.5"
-            label="设备编号"
+            label="设备SN"
             prop="sn"
           >
             <el-input v-model.trim="form.sn" maxlength="50" show-word-limit />
@@ -756,7 +756,7 @@ export default {
         thirdPartyId: [
           { required: true, message: '请选择设备品牌名称', trigger: 'blur' }
         ],
-        sn: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
+        sn: [{ required: true, message: '请输入设备SN', trigger: 'blur' }],
         name: [{ required: true, message: '请输入设备地点', trigger: 'blur' }],
         enable: [
           { required: true, message: '请选择是否启用', trigger: 'blur' }
@@ -1260,7 +1260,7 @@ export default {
       doGetFaceDevices(pageData).then((res) => {
         const json = res.data.list
         const arr = [
-          { name: '设备编号', value: 'sn' },
+          { name: '设备SN', value: 'sn' },
           { name: '设备地点', value: 'name' },
           { name: '应用类型', value: 'faceDeviceTypeName' },
           { name: '设备品牌名称', value: 'thirdPartyName' },

src/views/pass_records/components/ysgz_pass_records.vue

@@ -82,7 +82,7 @@
             range-separator="-"
             :start-placeholder="`${aItem.searchField=='faceTime'?'通行':''}开始日期`"
             :end-placeholder="`${aItem.searchField=='faceTime'?'通行':''}结束日期`"
-            :clearable="false"
+            :clearable="true"
             :editable="false"
           />
         </template>

src/views/visitors_list/index.vue

@@ -1,167 +1,126 @@
 <template>
   <div v-loading="downloadLoading" class="app-container">
-    <el-button
-      v-if="placeType != 2 && !checkRole([99])"
-      type="primary"
-      class="margin-left"
-      @click="regularAll"
-    >全部转为员工</el-button>
-    <!--操作区-->
-    <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-input
-      v-model="page.data.idNumber"
-      placeholder="请输入身份证号"
-      class="margin-left input"
-    />
-    <el-select
-      v-if="checkRole([1, 2, 3, 4])"
-      v-model="page.data.username"
-      clearable
-      filterable
-      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-date-picker
-      v-model="page.data.startTime"
-      type="datetime"
-      placeholder="有效期开始时间"
-      value-format="yyyy-MM-dd HH:mm:ss"
-      class="margin-left"
-    />
-    <el-date-picker
-      v-model="page.data.endTime"
-      type="datetime"
-      placeholder="有效期结束时间"
-      value-format="yyyy-MM-dd HH:mm:ss"
-      class="margin-left"
-    />
-    <el-select
-      v-if="checkRole([2, 3, 4])"
-      v-model="page.data.provinceId"
-      filterable
-      clearable
-      placeholder="请选择省份"
-      class="margin-left input"
-      @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-if="checkRole([2, 3, 4])"
-      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
-      v-if="checkRole([2, 3, 4])"
-      v-model="page.data.areaId"
-      filterable
-      clearable
-      placeholder="请选择区域"
-      class="margin-left input"
-    >
-      <el-option
-        v-for="item in area_list_search"
-        :key="item.areaCodeId"
-        :label="item.name"
-        :value="item.areaCodeId"
-      />
-    </el-select>
-    <span v-for="(item, index) in page.data.contents" :key="index">
-      <el-date-picker
-        v-if="item.customType === '日期'"
-        v-model="item.customNameVal"
-        type="datetime"
-        class="margin-left input"
-        :placeholder="item.prompt"
-        value-format="yyyy-MM-dd"
-        format="yyyy-MM-dd"
-      />
-      <el-time-picker
-        v-if="item.customType === '时间'"
-        v-model="item.customNameVal"
-        class="margin-left input"
-        :picker-options="{
-          selectableRange: '00:00:00 - 23:59:59',
-        }"
-        :placeholder="item.prompt"
-        value-format="HH:mm"
-        format="HH:mm"
-      />
-      <el-select
-        v-if="item.customType === '下拉选择'"
-        v-model="item.customNameVal"
-        class="margin-left input"
-        filterable
-        clearable
-        :placeholder="item.prompt"
-      >
-        <el-option
-          v-for="item in item.configurationOption"
-          :key="item.name"
-          :label="item.name"
-          :value="item.name"
+    <div class="operation-box">
+      <div class="operation-box_btn">
+        <el-button
+          v-if="placeType != 2 && !checkRole([99])"
+          type="primary"
+          @click="regularAll"
+        >全部转为员工</el-button>
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="最大支持导出五万条数据！"
+          placement="top-start"
+        >
+          <el-button
+            v-if="isOut === 1"
+            type="primary"
+            icon="el-icon-download"
+            @click="download"
+          >导出记录</el-button>
+        </el-tooltip>
+      </div>
+      <div class="operation-box_search">
+        <!--操作区-->
+        <el-input
+          v-model="page.data.name"
+          placeholder="请输入姓名"
+          class="search-input"
+        />
+        <el-input
+          v-model="page.data.idNumber"
+          placeholder="请输入身份证号"
+          class="search-input"
+        />
+        <el-input
+          v-model="page.data.phone"
+          placeholder="请输入手机号"
+          class="search-input"
         />
-      </el-select>
-      <el-input
-        v-if="item.customType === '文本'"
-        v-model="item.customNameVal"
-        class="margin-left input"
-        :placeholder="item.prompt"
-      />
-    </span>
+        <el-select
+          v-if="checkRole([1, 2, 3, 4])"
+          v-model="page.data.username"
+          clearable
+          filterable
+          placeholder="请选择所属账号"
+          class="search-input"
+        >
+          <el-option
+            v-for="item in user_list"
+            :key="item.id"
+            :label="item.username"
+            :value="item.username"
+          />
+        </el-select>
+        <el-date-picker
+          v-model="page.data.expirationDate"
+          type="datetimerange"
+          style="width: 350px;margin: 5px"
+          align="right"
+          unlink-panels
+          range-separator="-"
+          :start-placeholder="`有效期开始日期`"
+          :end-placeholder="`有效期结束日期`"
+          :clearable="true"
+          :editable="false"
+        />
+        <template v-for="(item, index) in page.data.contents">
+          <el-date-picker
+            v-if="item.customType === '日期'"
+            :key="index"
+            v-model="item.customNameVal"
+            type="datetime"
+            class="search-input"
+            :placeholder="item.prompt"
+            value-format="yyyy-MM-dd"
+            format="yyyy-MM-dd"
+          />
+          <el-time-picker
+            v-if="item.customType === '时间'"
+            :key="index"
+            v-model="item.customNameVal"
+            class="search-input"
+            :picker-options="{
+              selectableRange: '00:00:00 - 23:59:59',
+            }"
+            :placeholder="item.prompt"
+            value-format="HH:mm"
+            format="HH:mm"
+          />
+          <el-select
+            v-if="item.customType === '下拉选择'"
+            :key="index"
+            v-model="item.customNameVal"
+            class="search-input"
+            filterable
+            clearable
+            :placeholder="item.prompt"
+          >
+            <el-option
+              v-for="cItem in item.configurationOption"
+              :key="cItem.name"
+              :label="cItem.name"
+              :value="cItem.name"
+            />
+          </el-select>
+          <el-input
+            v-if="item.customType === '文本'"
+            :key="index"
+            v-model="item.customNameVal"
+            class="search-input"
+            :placeholder="item.prompt"
+          />
+        </template>
 
-    <el-button
-      type="primary"
-      icon="el-icon-search"
-      class="margin-left"
-      @click="fetchData"
-    >搜索</el-button>
-    <el-tooltip
-      class="item"
-      effect="dark"
-      content="最大支持导出五万条数据！"
-      placement="top-start"
-    >
-      <el-button
-        v-if="isOut === 1"
-        type="primary"
-        icon="el-icon-download"
-        class="margin-left"
-        @click="download"
-      >导出记录</el-button>
-    </el-tooltip>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          class="search-btn"
+          @click="fetchData"
+        >搜索</el-button>
+      </div>
+    </div>
     <!--主表格-->
     <el-table
       ref="table_form"
@@ -170,15 +129,16 @@
       :data="list"
       element-loading-text="操作中，请耐心等待！"
       border
+      height="calc(100vh - 280px)"
       fit
       highlight-current-row
     >
-      <el-table-column label="序号" align="center" width="80px">
+      <el-table-column label="序号" align="center" width="70">
         <template slot-scope="scope">
           {{ indexMethod(scope.$index) }}
         </template>
       </el-table-column>
-      <el-table-column label="实名照片" align="center">
+      <el-table-column label="实名照片" align="center" width="100">
         <template slot-scope="scope">
           <el-image
             style="width: 70px; height: 70px"
@@ -190,25 +150,26 @@
           </el-image>
         </template>
       </el-table-column>
-      <el-table-column label="姓名" align="center">
+      <el-table-column label="姓名" align="center" width="120">
         <template slot-scope="scope">
           {{ scope.row.name | matchNull }}
         </template>
       </el-table-column>
-      <el-table-column label="手机号" align="center">
+      <el-table-column label="身份证号" align="center" width="170">
         <template slot-scope="scope">
-          {{ scope.row.phone | matchNull }}
+          {{ scope.row.idNumber | matchNull }}
         </template>
       </el-table-column>
-      <el-table-column label="身份证号" align="center">
+      <el-table-column label="手机号" align="center" width="120">
         <template slot-scope="scope">
-          {{ scope.row.idNumber | matchNull }}
+          {{ scope.row.phone | matchNull }}
         </template>
       </el-table-column>
       <el-table-column
         v-if="$store.getters.placeType == 2 && !checkRole([99])"
         label="公司名称"
         align="center"
+        width="120"
         show-overflow-tooltip
       >
         <template slot-scope="scope">
@@ -218,47 +179,19 @@
 
       <el-table-column
         v-if="checkRole([1, 2, 3, 4])"
-        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
-        v-if="checkRole([1, 2, 3, 4])"
-        label="详细地址"
-        align="center"
-      >
-        <template slot-scope="scope">
-          {{ scope.row.address | matchNull }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="checkRole([1, 2, 3, 4])"
-        label="所属组织名称"
+        label="所属账号"
+        width="120"
         align="center"
       >
         <template slot-scope="scope">
-          {{ scope.row.policeStationName | matchNull }}
+          {{ scope.row.username | matchNull }}
         </template>
       </el-table-column>
-
       <el-table-column
-        v-if="checkRole([1, 2, 3, 4])"
-        label="所属账号"
+        label="认证类型"
         align="center"
+        width="120"
       >
-        <template slot-scope="scope">
-          {{ scope.row.username | matchNull }}
-        </template>
-      </el-table-column>
-      <el-table-column label="认证类型" align="center">
         <template slot-scope="scope">
           <el-tag
             v-if="scope.row.pushType === 0"
@@ -282,12 +215,20 @@
           <el-tag v-else effect="plain" type="info">其他</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="有效期开始时间" align="center">
+      <el-table-column
+        label="有效期开始时间"
+        align="center"
+        width="160"
+      >
         <template slot-scope="scope">
           {{ scope.row.startTime | matchNull }}
         </template>
       </el-table-column>
-      <el-table-column label="有效期结束时间" align="center">
+      <el-table-column
+        label="有效期结束时间"
+        align="center"
+        width="160"
+      >
         <template slot-scope="scope">
           {{ scope.row.endTime | matchNull }}
         </template>
@@ -297,6 +238,7 @@
           v-for="(item, index) in addCustomList"
           :key="index"
           align="center"
+          width="120"
           :label="item.customName"
         >
           <template slot-scope="scope">
@@ -312,7 +254,11 @@
           </template>
         </el-table-column>
       </template>
-      <el-table-column label="创建时间" align="center">
+      <el-table-column
+        label="创建时间"
+        align="center"
+        width="160"
+      >
         <template slot-scope="scope">
           {{ scope.row.createTime | matchNull }}
         </template>
@@ -320,6 +266,7 @@
       <el-table-column
         align="center"
         prop=""
+        fixed="right"
         label="操作区"
         :width="!checkRole([1, 2, 5,99]) ? '120' : '450'"
       >
@@ -386,17 +333,14 @@ import {
 import { checkRole } from '@/utils/checkRole'
 import Pagination from '@/components/Pagination'
 import {
-  getArea,
-  getCity,
-  getProvince,
   getUserListSearch,
-  getContext,
   getVisitorListFrom,
   getContextById,
   deleteVisitor,
   addSingle,
   userVisitorlistExcelOut
 } from '@/api/user_manage'
+import { parseTime } from '@/utils'
 
 export default {
   components: { Pagination, detailsDialog },
@@ -424,12 +368,11 @@ export default {
           name: '',
           phone: '',
           idNumber: '',
-          provinceId: null,
-          cityId: null,
-          areaId: null,
           contents: null,
+          expirationDate: [],
           startTime: null,
-          endTime: null
+          endTime: null,
+          pushType: 2
         },
         pageNum: 1,
         pageSize: 10
@@ -437,10 +380,6 @@ export default {
       total: 0,
       // 账号列表_搜索
       user_list: [],
-      // 省市县列表_搜索
-      province_list_search: [],
-      city_list_search: [],
-      area_list_search: [],
       // 是否认证_搜索
       status_list: [
         { id: 1, name: '已认证' },
@@ -456,23 +395,6 @@ export default {
   created() {
     this.fetchData()
     this.getUserListSearch()
-    this.getAddressListSearch(1)
-    if (checkRole([2, 3])) {
-      this.getAddressListSearch(2, this.$store.getters.provinceId)
-      this.page.data.provinceId = this.$store.getters.provinceId
-    } else if (checkRole([4])) {
-      this.getAddressListSearch(2, this.$store.getters.provinceId)
-      this.page.data.provinceId = this.$store.getters.provinceId
-      this.getAddressListSearch(3, this.$store.getters.cityId)
-      this.page.data.cityId = this.$store.getters.cityId
-    } else if (checkRole([5])) {
-      this.getAddressListSearch(2, this.$store.getters.provinceId)
-      this.page.data.provinceId = this.$store.getters.provinceId
-      this.getAddressListSearch(3, this.$store.getters.cityId)
-      this.page.data.cityId = this.$store.getters.cityId
-      this.page.data.areaId = this.$store.getters.areaId
-      this.getContextById(this.$store.getters.adminId)
-    }
   },
   methods: {
     // 查询权限
@@ -480,6 +402,15 @@ export default {
     // 获取列表数据
     fetchData() {
       this.listLoading = true
+      let startTime = null
+      let endTime = null
+      const expirationDate = this.page.data.expirationDate
+      if (expirationDate && expirationDate.length > 0) {
+        startTime = parseTime(expirationDate[0], '{y}-{m}-{d} {h}:{i}:{s}')
+        endTime = parseTime(expirationDate[1], '{y}-{m}-{d} {h}:{i}:{s}')
+      }
+      this.page.data.startTime = startTime
+      this.page.data.endTime = endTime
       getPageListVisitor(this.page).then((res) => {
         this.list = res.data.list
         this.total = res.data.total
@@ -507,46 +438,6 @@ export default {
         this.user_list = res.data
       })
     },
-    // 获得省市县列表_搜索
-    getAddressListSearch(type, code) {
-      switch (type) {
-        case 1:
-          getProvince().then((res) => {
-            this.province_list_search = res.data
-          })
-          break
-        case 2:
-          getCity(code).then((res) => {
-            this.city_list_search = res.data
-          })
-          break
-        case 3:
-          getArea(code).then((res) => {
-            this.area_list_search = res.data
-          })
-          break
-        default:
-          break
-      }
-    },
-    // 选择省份_搜索
-    chooseProvinceSearch(e) {
-      this.city_list_search = []
-      this.page.data.cityId = ''
-      this.page.data.cityName = ''
-      this.area_list_search = []
-      this.page.data.areaId = ''
-      this.page.data.areaName = ''
-      this.getAddressListSearch(2, e)
-      this.getTagList(e)
-    },
-    // 选择市_搜索
-    chooseCitySearch(e) {
-      this.area_list = []
-      this.page.data.areaId = ''
-      this.page.data.areaName = ''
-      this.getAddressListSearch(3, e)
-    },
     // 返回列表序号
     indexMethod(index) {
       return (this.page.pageNum - 1) * this.page.pageSize + index + 1
@@ -678,49 +569,5 @@ export default {
 .table {
   margin-top: 15px;
 }
-.flex {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.margin-left {
-  margin: 10px 0 0 10px;
-}
-.margin-left-s {
-  margin-left: 15px;
-}
-.input {
-  width: 200px;
-}
-/*批量导入按钮*/
-.file {
-  margin: 10px 0 0 10px;
-  position: relative;
-  background: #d0eeff;
-  border: 1px solid #99d3f5;
-  border-radius: 4px;
-  padding: 10px 20px;
-  box-sizing: border-box;
-  overflow: hidden;
-  color: #1e88c7;
-  text-decoration: none;
-  text-indent: 0;
-}
-.file input {
-  position: absolute;
-  font-size: 14px;
-  width: 106px;
-  height: 40px;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-.file:hover {
-  background: #aadffd;
-  border-color: #78c3f3;
-  color: #004974;
-  text-decoration: none;
-}
 </style>
 

src/views/visitors_record/index.vue

@@ -60,7 +60,7 @@
               range-separator="-"
               :start-placeholder="`${aItem.searchField=='signOutTime'?'签离':aItem.searchField=='expirationDate'?'有效期':'通行'}开始日期`"
               :end-placeholder="`${aItem.searchField=='signOutTime'?'签离':aItem.searchField=='expirationDate'?'有效期':'通行'}结束日期`"
-              :clearable="false"
+              :clearable="true"
               :editable="false"
             />
           </template>