表格修改

src/views/Equipment/batch.vue

@@ -1,24 +1,37 @@
 <template>
-
   <div class="box-center">
     <!-- 头 -->
     <div class="app-top">
-      <div class="app-titel" style="display: flex;justify-content: space-between;align-items: center;padding: 0 20px;">
-      <div style="display: flex;align-items: center;">
-        <div class="label">批次号：</div>
-        <div>
-             <el-input v-model="batchId" placeholder="批次号"  maxlength="20" clearable></el-input>
-        </div>
-        <div style="margin-left: 20px">
-          <el-button type="primary" @click="Screening()">筛选</el-button
-          >
+      <div
+        class="app-titel"
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0 20px;
+        "
+      >
+        <div style="display: flex; align-items: center">
+          <div class="label">批次号：</div>
+          <div>
+            <el-input
+              v-model="batchId"
+              placeholder="批次号"
+              maxlength="20"
+              clearable
+            ></el-input>
+          </div>
+          <div style="margin-left: 20px">
+            <el-button type="primary" @click="Screening()">筛选</el-button>
+          </div>
+          <div style="margin-left: 20px">
+            <el-button @click="Screeningofempty()" type="text"
+              >清空筛选条件</el-button
+            >
+          </div>
         </div>
+
         <div style="margin-left: 20px">
-          <el-button @click="Screeningofempty()" type="text">清空筛选条件</el-button>
-        </div>
-      </div>
-        
-         <div style="margin-left: 20px">
           <el-button v-if="equ_batch_add" @click="editorinfo()" type="primary"
             >添加批次</el-button
           >
@@ -28,104 +41,207 @@
 
     <!-- 表格 -->
     <div class="cen-tab">
-        <el-table
-          :data="tableData"
-          stripe
-          ref="table"
-          height="550px"
-          style="width: 100%">
-          <el-table-column
-            prop="batchId"
-            label="批次号"
-            align="center"
+      <avue-crud
+        ref="crud"
+        :page.sync="page"
+        :data="tableData"
+        :table-loading="tableLoading"
+        :option="tableOption"
+        :show-column.sync="showColumn"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template slot-scope="{ row }" slot="menu">
+          <el-button
+            type="text"
+            size="small"
+            v-if="row.status == 1 && tem_pwl_stop"
+            @click="clickstateis(row)"
+            >启用</el-button
           >
-          </el-table-column>
-          <el-table-column
-            prop="name"
-            label="设备号"
-             align="center"
-           >
-            <template slot-scope="scope">
-                <p>{{scope.row.deviceNoStart}}:{{scope.row.deviceNoEnd}}</p>
-              </template>
-          </el-table-column>
-          <el-table-column
-            prop="realityEquipmentCount"
-            label="应收设备数量"
-             align="center">
-          </el-table-column>
-
-          <el-table-column
-            prop="receivableEquipmentCount"
-            label="实收设备数量"
-            align="center"
+          <el-button
+            type="text"
+            size="small"
+            v-if="row.status == 0 && tem_pwl_stop"
+            @click="clickstateno(row)"
+            >停用</el-button
           >
-          </el-table-column>
-          <el-table-column
-            prop="acceptanceNum"
-            label="已验收设备数量"
-             align="center"
-           >
-          </el-table-column>
-          <el-table-column
-            prop="createTime"
-            label="创建时间"
-             align="center">
-          </el-table-column>
-
-          <el-table-column
-            prop="remark"
-            label="备注"
-            align="center"
+          <el-button
+            type="text"
+            size="small"
+            v-if="tem_pwl_edit"
+            @click="clickbianji(row)"
+            >编辑</el-button
           >
-          </el-table-column>
-         <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-              <el-button v-if="equ_batch_edit" type="text" @click="clickbianji(scope.row)">修改</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
-            <el-pagination
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-              :current-page="pageNum"
-              :page-sizes="[10, 30, 50]"
-              :page-size="pageSize"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="total">
-            </el-pagination>
-        </div>
-    </div>
+          <el-dropdown>
+            <el-button type="text" size="small" style="margin-left: 10px"
+              >更多</el-button
+            >
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <el-button
+                  type="text"
+                  size="small"
+                  v-if="tem_pwl_del"
+                  @click="templatedel(row)"
+                  >删除</el-button
+                >
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button type="text" size="small" @click="goinfo(row)"
+                  >查看</el-button
+                >
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </avue-crud>
 
+      <!-- <el-table
+        :data="tableData"
+        stripe
+        ref="table"
+        height="550px"
+        style="width: 100%"
+      >
+        <el-table-column prop="batchId" label="批次号" align="center">
+        </el-table-column>
+        <el-table-column prop="name" label="设备号" align="center">
+          <template slot-scope="scope">
+            <p>{{ scope.row.deviceNoStart }}:{{ scope.row.deviceNoEnd }}</p>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="realityEquipmentCount"
+          label="应收设备数量"
+          align="center"
+        >
+        </el-table-column>
 
+        <el-table-column
+          prop="receivableEquipmentCount"
+          label="实收设备数量"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="acceptanceNum"
+          label="已验收设备数量"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" align="center">
+        </el-table-column>
+
+        <el-table-column prop="remark" label="备注" align="center">
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button
+              v-if="equ_batch_edit"
+              type="text"
+              @click="clickbianji(scope.row)"
+              >修改</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNum"
+          :page-sizes="[10, 30, 50]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div> -->
+    </div>
 
-       <el-dialog :title='isshow' :visible.sync="dialogVisible" @closed='clear' :center="true" width="600px">
-      <el-form :model="addagentobj" label-position="labelPosition" :rules="rules"  ref="addagentobj" label-width="110px" style="width:90%; margin: 0 auto;">
-           <el-form-item label="批次号" prop="batchId">
-                <el-input v-model="addagentobj.batchId" placeholder="批次号" maxlength="20" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="应收设备数量" prop="realityEquipmentCount">
-                <el-input placeholder="应收设备数量" v-model="addagentobj.realityEquipmentCount"  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));" maxlength="5" clearable></el-input>
-          </el-form-item>
-           <el-form-item label="实收设备数量" prop="receivableEquipmentCount">
-              <el-input placeholder="实收设备数量" v-model="addagentobj.receivableEquipmentCount" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));" maxlength="5" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="设备号开头" prop="deviceNoStart">
-              <el-input placeholder="设备号开头" v-model="addagentobj.deviceNoStart" clearable  maxlength="10"></el-input>
-          </el-form-item>
-          <el-form-item label="设备号结尾" prop="deviceNoEnd">
-              <el-input placeholder="设备号结尾" v-model="addagentobj.deviceNoEnd" clearable  maxlength="10"></el-input>
-          </el-form-item>
-            <el-form-item label="备注：">
-              <el-input placeholder="备注" type="textarea" v-model="addagentobj.remark"   maxlength="50" show-word-limit></el-input>
-          </el-form-item>
+    <el-dialog
+      :title="isshow"
+      :visible.sync="dialogVisible"
+      @closed="clear"
+      :center="true"
+      width="600px"
+    >
+      <el-form
+        :model="addagentobj"
+        label-position="labelPosition"
+        :rules="rules"
+        ref="addagentobj"
+        label-width="110px"
+        style="width: 90%; margin: 0 auto"
+      >
+        <el-form-item label="批次号" prop="batchId">
+          <el-input
+            v-model="addagentobj.batchId"
+            placeholder="批次号"
+            maxlength="20"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="应收设备数量" prop="realityEquipmentCount">
+          <el-input
+            placeholder="应收设备数量"
+            v-model="addagentobj.realityEquipmentCount"
+            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+            maxlength="5"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="实收设备数量" prop="receivableEquipmentCount">
+          <el-input
+            placeholder="实收设备数量"
+            v-model="addagentobj.receivableEquipmentCount"
+            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
+            maxlength="5"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="设备号开头" prop="deviceNoStart">
+          <el-input
+            placeholder="设备号开头"
+            v-model="addagentobj.deviceNoStart"
+            clearable
+            maxlength="10"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="设备号结尾" prop="deviceNoEnd">
+          <el-input
+            placeholder="设备号结尾"
+            v-model="addagentobj.deviceNoEnd"
+            clearable
+            maxlength="10"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="备注：">
+          <el-input
+            placeholder="备注"
+            type="textarea"
+            v-model="addagentobj.remark"
+            maxlength="50"
+            show-word-limit
+          ></el-input>
+        </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="editor()">保存</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="editor()">保存</el-button>
       </div>
-  </el-dialog>
+    </el-dialog>
   </div>
 </template>
 
@@ -134,148 +250,176 @@ import { mapGetters } from "vuex";
 export default {
   data() {
     return {
-      dialogVisible:false,
-      batchId:'',
+      tableIdName: "EquipmentBatch", // 当前页面需要的变量
+      tableOption: this.$tableOption.EquipmentBatch, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+      },
+
+      dialogVisible: false,
+      batchId: "",
       tableData: [],
-      currentPage4:1,
-      addagentobj:{
-        id:'',
-        batchId:'',// 批次号
-        realityEquipmentCount:'',// 应收数
-        receivableEquipmentCount:'',// 实收数
-        deviceNoStart:'',// 开头
-        deviceNoEnd:'',// 结尾
-        remark:''//备注
+      currentPage4: 1,
+      addagentobj: {
+        id: "",
+        batchId: "", // 批次号
+        realityEquipmentCount: "", // 应收数
+        receivableEquipmentCount: "", // 实收数
+        deviceNoStart: "", // 开头
+        deviceNoEnd: "", // 结尾
+        remark: "", //备注
       },
-      rules:{
-        batchId: [
-            { required: true, message: '请输入批次号', trigger: 'blur' },
-          ],
-          realityEquipmentCount: [
-            { required: true, message: '请输入应收设备数量', trigger: 'blur' },
-          ],
-          receivableEquipmentCount: [
-            { required: true, message: '请输入实收设备数量', trigger: 'blur' },
-          ],
-          deviceNoStart: [
-            { required: true, message: '请输入设备号开头', trigger: 'blur' },
-          ],
-          deviceNoEnd: [
-            { required: true, message: '请输入设备号结尾', trigger: 'blur' },
-          ],
+      rules: {
+        batchId: [{ required: true, message: "请输入批次号", trigger: "blur" }],
+        realityEquipmentCount: [
+          { required: true, message: "请输入应收设备数量", trigger: "blur" },
+        ],
+        receivableEquipmentCount: [
+          { required: true, message: "请输入实收设备数量", trigger: "blur" },
+        ],
+        deviceNoStart: [
+          { required: true, message: "请输入设备号开头", trigger: "blur" },
+        ],
+        deviceNoEnd: [
+          { required: true, message: "请输入设备号结尾", trigger: "blur" },
+        ],
       },
-      total:0,//总条数
-      pageNum:1,
-      pageSize:30,
-      isshow:'绑定'
-
+      total: 0, //总条数
+      pageNum: 1,
+      pageSize: 30,
+      isshow: "绑定",
     };
   },
-    computed: {
+  computed: {
     ...mapGetters(["permissions"]),
   },
+
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
     this.equ_batch_add = this.permissions["equ_batch_add"];
     this.equ_batch_edit = this.permissions["equ_batch_edit"];
   },
   mounted() {
-    this.getcompanyList()
+    this.getcompanyList();
   },
   methods: {
+    
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
     //編輯
-    clickbianji(row){
-      this.addagentobj.id=row.id;
-      this.addagentobj.batchId=row.batchId;
-      this.addagentobj.realityEquipmentCount=row.realityEquipmentCount;
-      this.addagentobj.receivableEquipmentCount=row.receivableEquipmentCount;
-      this.addagentobj.deviceNoStart=row.deviceNoStart;
-      this.addagentobj.deviceNoEnd=row.deviceNoEnd;
-      this.addagentobj.remark=row.remark;
-      this.isshow='编辑';
-      this.dialogVisible=true;
+    clickbianji(row) {
+      this.addagentobj.id = row.id;
+      this.addagentobj.batchId = row.batchId;
+      this.addagentobj.realityEquipmentCount = row.realityEquipmentCount;
+      this.addagentobj.receivableEquipmentCount = row.receivableEquipmentCount;
+      this.addagentobj.deviceNoStart = row.deviceNoStart;
+      this.addagentobj.deviceNoEnd = row.deviceNoEnd;
+      this.addagentobj.remark = row.remark;
+      this.isshow = "编辑";
+      this.dialogVisible = true;
     },
-    clear(){
+    clear() {
       this.$refs.addagentobj.resetFields();
     },
     //添加
-    editorinfo(){
-      this.isshow='绑定';
-      this.addagentobj.id='';
-      this.addagentobj.batchId='';
-      this.addagentobj.realityEquipmentCount='';
-      this.addagentobj.receivableEquipmentCount='';
-      this.addagentobj.deviceNoStart='';
-      this.addagentobj.deviceNoEnd='';
-      this.addagentobj.remark='';
-      this.dialogVisible=true;
+    editorinfo() {
+      this.isshow = "绑定";
+      this.addagentobj.id = "";
+      this.addagentobj.batchId = "";
+      this.addagentobj.realityEquipmentCount = "";
+      this.addagentobj.receivableEquipmentCount = "";
+      this.addagentobj.deviceNoStart = "";
+      this.addagentobj.deviceNoEnd = "";
+      this.addagentobj.remark = "";
+      this.dialogVisible = true;
     },
     //确认添加
-     editor(){
-         this.$refs.addagentobj.validate((valid) => {
-          if (valid) {
-            if(this.isshow=='绑定'){
-                this.$api.http.insert(this.addagentobj).then((res) => {
-               if(res.code==0){
-                    this.dialogVisible=false;
-                    this.$refs.addagentobj.resetFields();
-                    this.Screeningofempty()
-                }else{
-                  this.$message.error(res.message);
-               }
-             });
-            }else{
-              this.$api.http.insertupdate(this.addagentobj).then((res) => {
-               if(res.code==0){
-                    this.dialogVisible=false;
-                    this.$refs.addagentobj.resetFields();
-                    this.Screeningofempty()
-                }else{
-                  this.$message.error(res.message);
-               }
-             });
-            }
+    editor() {
+      this.$refs.addagentobj.validate((valid) => {
+        if (valid) {
+          if (this.isshow == "绑定") {
+            this.$api.http.insert(this.addagentobj).then((res) => {
+              if (res.code == 0) {
+                this.dialogVisible = false;
+                this.$refs.addagentobj.resetFields();
+                this.Screeningofempty();
+              } else {
+                this.$message.error(res.message);
+              }
+            });
           } else {
-            return false;
+            this.$api.http.insertupdate(this.addagentobj).then((res) => {
+              if (res.code == 0) {
+                this.dialogVisible = false;
+                this.$refs.addagentobj.resetFields();
+                this.Screeningofempty();
+              } else {
+                this.$message.error(res.message);
+              }
+            });
           }
-        });
+        } else {
+          return false;
+        }
+      });
     },
-      //清空筛选
-    Screeningofempty(){
-        this.batchId='';
-        this.pageNum=1
-        this.getcompanyList()
+    //清空筛选
+    Screeningofempty() {
+      this.batchId = "";
+      this.page.currentPage = 1;
+      this.getcompanyList();
     },
     //筛选
-    Screening(){
-      this.pageNum=1
-      this.getcompanyList()
+    Screening() {
+      this.page.currentPage = 1;
+      this.getcompanyList();
     },
-       // 获取列表
+    // 获取列表
     getcompanyList() {
-      this.tableData=[];
-      let parmest={
-          current: this.pageNum,
-          size: this.pageSize,
-          batchId:this.batchId
-      }
+      this.tableData = [];
+      let parmest = {
+        current: this.page.currentPage,
+        size: this.page.pageSize,
+        batchId: this.batchId,
+      };
       this.$api.http.getequipmentbatch(parmest).then((res) => {
-          console.log(res.data);
-          this.tableData=res.data.records;
-          this.total=res.data.total
-                    // 表格中设置ref属性，在数据渲染之后或者updated()之后
-          this.$nextTick(() => {
-            this.$refs.table.doLayout();
-          });
+        console.log(res.data);
+        this.tableData = res.data.records;
+        this.page.total = res.data.total;
+        // 表格中设置ref属性，在数据渲染之后或者updated()之后
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
         });
+      });
+    },
+    handleSizeChange(val) {
+      this.page.pageSize = val;
+      this.getcompanyList();
+    },
+    handleCurrentChange(val) {
+      this.page.currentPage = val;
+      this.getcompanyList();
     },
-      handleSizeChange(val) {
-       this.pageSize=val;
-        this.getcompanyList()
-      },
-      handleCurrentChange(val) {
-        this.pageNum=val;
-        this.getcompanyList()
-      },
   },
 };
 </script>
@@ -287,10 +431,10 @@ export default {
   min-width: 1000px;
   padding-bottom: 40px;
 }
-.cen-tab{
+.cen-tab {
   width: 100%;
   padding: 15px;
-  background: #FFFFFF;
+  background: #ffffff;
   margin-top: 15px;
 }
 .tophove {
@@ -333,27 +477,27 @@ export default {
     }
   }
 }
-/deep/ .el-table__header-wrapper{
-  thead{
-    tr{
-      th{
-        background: #F5F7FA;
+/deep/ .el-table__header-wrapper {
+  thead {
+    tr {
+      th {
+        background: #f5f7fa;
         color: #333333;
       }
     }
   }
 }
-/deep/ .el-dialog--center{
+/deep/ .el-dialog--center {
   border-radius: 8px;
-  .el-dialog__title{
+  .el-dialog__title {
     font-weight: bold;
   }
 }
-/deep/ .el-button--primary{
-  background: #2671E2 !important;
-  border: 1px solid #2671E2 !important;
+/deep/ .el-button--primary {
+  background: #2671e2 !important;
+  border: 1px solid #2671e2 !important;
 }
-/deep/ .el-button--text{
-  color: #2671E2;
+/deep/ .el-button--text {
+  color: #2671e2;
 }
 </style>

src/views/Equipment/index.vue

@@ -66,26 +66,6 @@
           </el-select>
         </div>
 
-        <!-- <div class="div-lab">
-          <div class="label">售出状态</div>
-          <el-select
-            class="div-inp"
-            multiple
-            clearable
-            collapse-tags
-            v-model="searchForm.keywordsId"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div> -->
-
         <div class="div-lab">
           <div class="label">领用状态：</div>
           <el-select
@@ -105,66 +85,6 @@
             </el-option>
           </el-select>
         </div>
-        <!--
-        <div class="div-lab">
-          <div class="label">录音状态</div>
-          <el-select
-            class="div-inp"
-            multiple
-            clearable
-            collapse-tags
-            v-model="searchForm.audioStatus"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in audioStatusList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div> -->
-
-        <!-- <div class="div-lab">
-          <div class="label">上传状态</div>
-          <el-select
-            class="div-inp"
-            multiple
-            clearable
-            collapse-tags
-            v-model="searchForm.uploadStatus"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in uploadStatusList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div> -->
-
-        <!-- <div class="div-lab">
-          <div class="label">关机状态</div>
-          <el-select
-            class="div-inp"
-            multiple
-            clearable
-            collapse-tags
-            v-model="searchForm.offStatus"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in offStatusList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div> -->
       </div>
       <div style="display: flex">
         <div class="app-titel" style="margin-top: 15px">
@@ -177,15 +97,6 @@
           </div>
         </div>
         <div class="app-titel" style="margin-top: 15px">
-          <!-- <div class="label" style="color: #ffffff">筛选相关：</div> -->
-          <!-- <div style="margin-left: 20px">
-          <el-button
-            @click="Batchreturn()"
-            type="primary"
-            :disabled="multipleSelection.length == 0"
-            >批量归还</el-button
-          >
-        </div> -->
           <div
             style="margin-left: auto; margin-right: 10px"
             v-if="euq_index_downLoad"
@@ -224,294 +135,76 @@
 
     <!-- 表格 -->
     <div class="cen-tab">
-      <div class="tablimit">
-        <el-table
-          :data="tableData"
-          stripe
-          height="100%"
-          @selection-change="handleSelectionChange"
-          :header-cell-style="{ background: '#F5F7FA', color: '#333333' }"
-        >
-          <el-table-column type="selection" width="55"> </el-table-column>
-          <el-table-column type="index" label="序号" align="center">
-          </el-table-column>
-          <el-table-column prop="imei" label="设备编号" align="center">
-            <template slot-scope="{ row }">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                :content="row.imei"
-                placement="top-start"
+      <avue-crud
+        ref="crud"
+        :page.sync="page"
+        :data="tableData"
+        :table-loading="tableLoading"
+        :option="tableOption"
+        :show-column.sync="showColumn"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        @selection-change="handleSelectionChange"
+      >
+        <template slot-scope="{ row }" slot="menu">
+          <el-dropdown
+            v-if="
+              (row.receiveType == 2 && euq_index_back) ||
+              equ_index_change ||
+              equ_index_auto ||
+              (row.acceptanceStatus == 1 && equ_index_makeSure) ||
+              (row.acceptanceStatus != (1 || 0) && euq_index_normal) ||
+              (equ_index_bind && row.receiveType != 2) ||
+              (equ_index_del && row.receiveType != 2) ||
+              (equ_index_ubind && row.propertyId)
+            "
+            @command="handleCommand($event, row)"
+            trigger="click"
+          >
+            <span
+              style="
+                color: #2671e2;
+                font-size: 12px;
+                margin-left: 10px;
+                cursor: pointer;
+              "
+            >
+              更多<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                command="toinifoThereturn"
+                v-if="row.receiveType == 2 && euq_index_back"
+                >归还</el-dropdown-item
               >
-                <span
-                  style="
-                    display: block;
-                    width: 100%;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  "
-                >
-                  {{ row.imei || "-" }}</span
-                >
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column prop="batchId" label="批次号" align="center">
-            <template slot-scope="{ row }">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                :content="row.batchId"
-                placement="top-start"
+
+              <el-dropdown-item command="zhuanxeishezhi"
+                >转写设置</el-dropdown-item
               >
-                <span
-                  style="
-                    display: block;
-                    width: 100%;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  "
-                >
-                  {{ row.batchId || "-" }}</span
-                >
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column prop="agentName" label="代理商" align="center">
-          </el-table-column>
-          <el-table-column prop="orgName" label="公司" align="center">
-            <template slot-scope="{ row }">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                :content="row.orgName"
-                placement="top-start"
+              <el-dropdown-item
+                command="acceptance"
+                v-if="row.acceptanceStatus == 1 && equ_index_makeSure"
+                >验收</el-dropdown-item
               >
-                <span
-                  style="
-                    display: block;
-                    width: 100%;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  "
-                >
-                  {{ row.orgName || "-" }}</span
-                >
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column prop="houseName" label="项目" align="center">
-          </el-table-column>
-          <el-table-column prop="userName" label="领用人" align="center">
-          </el-table-column>
-          <el-table-column prop="userPhone" label="领用人手机" align="center">
-          </el-table-column>
-          <el-table-column prop="receiveType" label="领用状态" align="center">
-            <template slot-scope="{ row }">
-              {{
-                row.receiveType == 1
-                  ? "未领用"
-                  : row.receiveType == 2
-                  ? "使用中"
-                  : "已归还"
-              }}
-            </template>
-          </el-table-column>
-          <!-- <el-table-column prop="date" label="在线状态" align="center">
-        </el-table-column>
-        <el-table-column prop="date" label="录音状态" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="上传状态" align="center">
-        </el-table-column> -->
-          <!-- <el-table-column
-          prop="autoSwitch"
-          label="自动转写开关"
-          align="center"
-          width="100"
-        >
-          <template slot-scope="{ row }">
-            {{ row.autoSwitch == 0 ? "已关闭" : "已开启" }}
-          </template>
-        </el-table-column> -->
-          <el-table-column
-            prop="transliterationMethodName"
-            label="转写方式"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="acceptanceStatus"
-            label="设备状态"
-            align="center"
-          >
-            <template slot-scope="{ row }">
-              {{
-                row.acceptanceStatus == 0
-                  ? "已验收"
-                  : row.acceptanceStatus == 1
-                  ? "未验收"
-                  : row.acceptanceStatus == 2
-                  ? "维修中"
-                  : row.acceptanceStatus == 3
-                  ? "更换中"
-                  : "已报损"
-              }}
-            </template>
-          </el-table-column>
-
-          <!-- <el-table-column prop="name" label="转写方式" align="center">
-        </el-table-column> -->
-          <!-- <el-table-column prop="name" label="开机指示灯" align="center">
-        </el-table-column> -->
-          <!-- <el-table-column
-          prop="name"
-          label="电池电量"
-          width="200"
-          align="center"
-        >
-          <template slot-scope="{ row }">
-            <el-progress :percentage="80" :color="customColors"></el-progress>
-          </template>
-        </el-table-column>
-        <el-table-column prop="name" label="信号强度" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="待上传文件" align="center">
-        </el-table-column>
-
-        <el-table-column prop="name" label="更新时间" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="开机时间" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="关机时间" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="关机类型" align="center">
-        </el-table-column> -->
-
-          <el-table-column
-            prop="createTime"
-            label="添加时间"
-            align="center"
-            width="150"
-          >
-          </el-table-column>
-          <!-- <el-table-column prop="name" label="购买时间" align="center">
-        </el-table-column> -->
-          <el-table-column
-            prop="bindHouseTime"
-            label="绑定项目时间"
-            align="center"
-            width="150"
-          >
-          </el-table-column>
-          <!-- <el-table-column
-          prop="name"
-          label="绑定代理时间"
-          align="center"
-          width="150"
-        >
-        </el-table-column> -->
-          <!--  scope -->
-          <el-table-column label="操作" align="center" fixed="right" width="80">
-            <template slot-scope="{ row }">
-              <!-- <el-button  v-if="row.receiveType == 2 && euq_index_back" type="text" @click="toinifoThereturn()">归还</el-button>
-            <el-button  v-if="equ_index_change" type="text" @click="infotranscription()">转写方式</el-button>
-            <el-button  v-if="equ_index_auto" type="text" @click="isAutoSwitch()">自动转写</el-button>
-            <el-button  v-if="row.acceptanceStatus == 1 && equ_index_makeSure" type="text" @click="acceptance()">验收</el-button>
-            <el-button  v-if="row.acceptanceStatus != (1 || 0) && euq_index_normal" type="text" @click="getRight()">恢复正常</el-button>
-            <el-button  v-if="orgType == 0 && equ_index_bind&&row.receiveType!=2" type="text" @click="toinfobinding()">绑定</el-button>
-            <el-button  v-if="equ_index_del&&row.receiveType!=2" type="text" @click="toinifodelete()">删除</el-button> -->
-
-              <el-dropdown
-                v-if="
-                  (row.receiveType == 2 && euq_index_back) ||
-                  equ_index_change ||
-                  equ_index_auto ||
-                  (row.acceptanceStatus == 1 && equ_index_makeSure) ||
-                  (row.acceptanceStatus != (1 || 0) && euq_index_normal) ||
-                  (equ_index_bind && row.receiveType != 2) ||
-                  (equ_index_del && row.receiveType != 2) ||
-                  (equ_index_ubind && row.propertyId)
-                "
-                @command="handleCommand($event, row)"
-                trigger="click"
+              <el-dropdown-item
+                command="toinfobinding"
+                v-if="equ_index_bind && row.receiveType != 2 && !row.propertyId"
+                >绑定</el-dropdown-item
               >
-                <span
-                  style="
-                    color: #2671e2;
-                    font-size: 12px;
-                    margin-left: 10px;
-                    cursor: pointer;
-                  "
-                >
-                  更多<i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item
-                    command="toinifoThereturn"
-                    v-if="row.receiveType == 2 && euq_index_back"
-                    >归还</el-dropdown-item
-                  >
-
-                  <el-dropdown-item command="zhuanxeishezhi"
-                    >转写设置</el-dropdown-item
-                  >
-                  <!-- <el-dropdown-item
-                  command="infotranscription"
-                  v-if="equ_index_change"
-                  >转写方式</el-dropdown-item
-                >
-                <el-dropdown-item command="isAutoSwitch" v-if="equ_index_auto"
-                  >自动转写</el-dropdown-item
-                > -->
-                  <el-dropdown-item
-                    command="acceptance"
-                    v-if="row.acceptanceStatus == 1 && equ_index_makeSure"
-                    >验收</el-dropdown-item
-                  >
-                  <!-- <el-dropdown-item
-                  command="getRight"
-                  v-if="row.acceptanceStatus != (1 || 0) && euq_index_normal"
-                  >恢复正常</el-dropdown-item
-                > -->
-                  <el-dropdown-item
-                    command="toinfobinding"
-                    v-if="
-                      equ_index_bind && row.receiveType != 2 && !row.propertyId
-                    "
-                    >绑定</el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    command="equipmentUnbind"
-                    v-if="equ_index_ubind && row.propertyId"
-                    >解绑</el-dropdown-item
-                  >
-                  <!-- <el-dropdown-item command="infoeditor">修改</el-dropdown-item> -->
-                  <el-dropdown-item
-                    command="toinifodelete"
-                    v-if="equ_index_del && row.receiveType != 2"
-                    >删除</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </el-dropdown>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div style="flex-shrink: 0;display: flex; justify-content: flex-end; margin-top: 10px">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[10, 30, 50]"
-          :page-size="size"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
+              <el-dropdown-item
+                command="equipmentUnbind"
+                v-if="equ_index_ubind && row.propertyId"
+                >解绑</el-dropdown-item
+              >
+              <el-dropdown-item
+                command="toinifodelete"
+                v-if="equ_index_del && row.receiveType != 2"
+                >删除</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </avue-crud>
     </div>
 
     <el-dialog
@@ -903,6 +596,16 @@ import { exportMethodPost } from "@/util/util";
 export default {
   data() {
     return {
+      tableIdName: "EquipmentIndex", // 当前页面需要的变量
+      tableOption: this.$tableOption.EquipmentIndex, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 30, // 每页显示多少条
+      },
+
       time: [],
       changeValue: "",
       selflag: "1",
@@ -982,9 +685,7 @@ export default {
           label: "已归还",
         },
       ],
-      currentPage: 1,
-      size: 30,
-      total: 10,
+
       value: "",
       input: "",
       orgType: localStorage.getItem("orgType"),
@@ -1053,7 +754,18 @@ export default {
   computed: {
     ...mapGetters(["permissions"]),
   },
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
     this.equ_index_add = this.permissions["equ_index_add"];
     this.equ_index_bind = this.permissions["equ_index_bind"];
     this.equ_index_unbind = this.permissions["equ_index_unbind"];
@@ -1081,6 +793,14 @@ export default {
     this.zkhousePage();
   },
   methods: {
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
     downLoad() {
       let obj = {
         timeType: 1,
@@ -1190,7 +910,7 @@ export default {
         uploadStatus: "", //上传状态
         offStatus: "", //关机状态
       };
-      this.currentPage = 1;
+      this.page.currentPage = 1;
       this.equipmentManagement();
     },
     resetImei() {
@@ -1216,15 +936,15 @@ export default {
       }
     },
     screen() {
-      this.currentPage = 1;
+      this.page.currentPage = 1;
       console.log(this.searchForm);
       this.equipmentManagement();
     },
     equipmentManagement() {
       this.$api.api
         .equipmentManagement({
-          size: this.size,
-          current: this.currentPage,
+          size: this.page.pageSize,
+          current: this.page.currentPage,
           timeType: 1,
           orgType: localStorage.getItem("orgType"),
           orgCode: localStorage.getItem("orgCode"),
@@ -1235,7 +955,11 @@ export default {
         .then((res) => {
           // console.log(res);
           this.tableData = res.data.records;
-          this.total = res.data.total;
+          this.page.total = res.data.total;
+          // 表格中设置ref属性，在数据渲染之后或者updated()之后
+          this.$nextTick(() => {
+            this.$refs.crud.doLayout();
+          });
         });
     },
     //批量绑定
@@ -1648,12 +1372,12 @@ export default {
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
-      this.size = val;
+      this.page.pageSize = val;
       this.equipmentManagement();
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
-      this.currentPage = val;
+      this.page.currentPage = val;
       this.equipmentManagement();
     },
   },
@@ -1672,7 +1396,6 @@ export default {
 }
 .cen-tab {
   width: 100%;
-  height: calc(100% - 94px - 30px);
   flex-grow: 1;
   padding: 15px;
   background: #ffffff;

src/views/Equipment/record.vue

@@ -50,15 +50,28 @@
         <div style="margin-left: 20px">
           <el-button @click="clascreen" type="text">清空筛选条件</el-button>
         </div>
-        <div style="margin-right: 20px;margin-left:auto;">
-          <el-button @click="exportFile" icon="el-icon-download">导出</el-button>
+        <div style="margin-left: auto">
+          <el-button @click="exportFile" icon="el-icon-download"
+            >导出</el-button
+          >
         </div>
       </div>
     </div>
 
     <!-- 表格 -->
     <div class="cen-tab">
-      <el-table :data="tableData" ref="table" stripe style="width: 100%" height="540" :header-cell-style="{background:'#F5F7FA',color:'#333333'}">
+      <avue-crud
+        ref="crud"
+        :page.sync="page"
+        :data="tableData"
+        :table-loading="tableLoading"
+        :option="tableOption"
+        :show-column.sync="showColumn"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+      </avue-crud>
+      <!-- <el-table :data="tableData" ref="table" stripe style="width: 100%" height="540" :header-cell-style="{background:'#F5F7FA',color:'#333333'}">
         <el-table-column prop="equipImei" label="设备编号" align="center">
         </el-table-column>
         <el-table-column prop="userName" label="领用人" align="center">
@@ -97,9 +110,6 @@
             }}
           </template>
         </el-table-column>
-        <!-- <el-table-column prop="date" label="备注" align="center">
-        </el-table-column> -->
-        <!--  scope -->
       </el-table>
       <div style="display: flex; justify-content: flex-end; margin-top: 10px">
         <el-pagination
@@ -112,7 +122,7 @@
           :total="total"
         >
         </el-pagination>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -121,7 +131,16 @@
 export default {
   data() {
     return {
-      currentPage: 4,
+      tableIdName: "EquipmentRecord", // 当前页面需要的变量
+      tableOption: this.$tableOption.EquipmentRecord, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+      },
+
       value: "",
       input: "",
       tableData: [],
@@ -168,11 +187,35 @@ export default {
       },
     };
   },
+
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
+
+  created() {
+    // 获取显隐的列表
+    this.setTableOption();
+  },
+
   mounted() {
     // 获取项目列表
     this.equipReceiveFindByPage();
   },
   methods: {
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
     selectChange(e) {
       this.searchForm.equipImei = "";
       this.searchForm.userName = "";
@@ -192,18 +235,22 @@ export default {
       this.searchForm.userName = "";
     },
     screen() {
-      this.currentPage = 1;
+      this.page.currentPage = 1;
       this.equipReceiveFindByPage();
     },
     exportFile() {
-      this.exportMethodPost("autoSR/equipReceive/pageExport", "领用记录",this.searchForm);
+      this.exportMethodPost(
+        "autoSR/equipReceive/pageExport",
+        "领用记录",
+        this.searchForm
+      );
     },
     // 导出.Excel公用方法
     exportMethodPost(url, name, data = {}) {
       axios({
         method: "get",
         url: url,
-        params:data,
+        params: data,
         responseType: "blob",
       })
         .then((res) => {
@@ -234,7 +281,7 @@ export default {
         });
     },
     clascreen() {
-      this.currentPage = 1;
+      this.page.currentPage = 1;
       this.searchForm.equipImei = "";
       this.searchForm.userName = "";
       this.searchForm.receiveType = "";
@@ -243,18 +290,18 @@ export default {
     // 获取常错词列表
     equipReceiveFindByPage() {
       let obj = {
-        current: this.currentPage,
-        size: this.size,
+        current: this.page.currentPage,
+        size: this.page.pageSize,
         ...this.searchForm,
       };
       this.$api.api.equipReceiveFindByPage(obj).then((res) => {
         // console.log(res);
         this.tableData = res.data.records;
-        this.total = res.data.total;
-                  // 表格中设置ref属性，在数据渲染之后或者updated()之后
-          this.$nextTick(() => {
-            this.$refs.table.doLayout();
-          });
+        this.page.total = res.data.total;
+        // 表格中设置ref属性，在数据渲染之后或者updated()之后
+        this.$nextTick(() => {
+          this.$refs.crud.doLayout();
+        });
       });
     },
     handleSelectionChange(val) {
@@ -262,12 +309,12 @@ export default {
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
-      this.size = val;
+      this.page.pageSize = val;
       this.equipReceiveFindByPage();
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
-      this.currentPage = val;
+      this.page.currentPage = val;
       this.equipReceiveFindByPage();
     },
   },
@@ -299,6 +346,7 @@ export default {
   padding-top: 15px;
   padding-bottom: 15px;
   .app-titel {
+    padding: 0 20px;
     width: 100%;
     display: flex;
     align-items: center;
@@ -336,21 +384,21 @@ export default {
 .div-inp {
   width: 250px;
 }
-/deep/ .el-table__header-wrapper{
-  thead{
-    tr{
-      th{
-        background: #F5F7FA;
+/deep/ .el-table__header-wrapper {
+  thead {
+    tr {
+      th {
+        background: #f5f7fa;
         color: #333333;
       }
     }
   }
 }
-/deep/ .el-button--primary{
-  background: #2671E2 !important;
-  border: 1px solid #2671E2 !important;
+/deep/ .el-button--primary {
+  background: #2671e2 !important;
+  border: 1px solid #2671e2 !important;
 }
-/deep/ .el-button--text{
-  color: #2671E2;
+/deep/ .el-button--text {
+  color: #2671e2;
 }
 </style>

src/views/Equipment/state.vue

@@ -116,35 +116,10 @@
               @change="selChange"
             >
               <el-option label="设备编号" value="1"></el-option>
-              <!-- <el-option label="版本号" value="2"></el-option> -->
-              <!-- <el-option label="批次号" value="3"></el-option>
-              <el-option label="代理商名称" value="4"></el-option>
-              <el-option label="公司名称" value="5"></el-option> -->
               <el-option label="项目名称" value="6"></el-option>
             </el-select>
           </el-input>
         </div>
-
-        <!-- <div class="div-lab">
-          <div class="label">售出状态</div>
-          <el-select
-            class="div-inp"
-            multiple
-            clearable
-            collapse-tags
-            v-model="searchForm.keywordsId"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div> -->
-
         <div class="div-lab">
           <div class="label">领用状态：</div>
           <el-select
@@ -204,27 +179,6 @@
             </el-option>
           </el-select>
         </div>
-
-        <!--<div class="div-lab">
-          <div class="label">上传状态：</div>
-          <el-select
-            class="div-inp"
-            filterable
-            clearable
-            collapse-tags
-            v-model="searchForm.simAudioUploadStatus"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in uploadStatusList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div>-->
-
         <div class="div-lab" v-show="isOpen">
           <div class="label">关机状态：</div>
           <el-select
@@ -248,86 +202,71 @@
           <div class="label">领用人：</div>
           <el-input type="text" v-model="searchForm.userName"></el-input>
         </div>
-        <!-- <div class="div-lab">
-          <div class="label">设备电量：</div>
-          <el-input type="text" v-model="searchForm.electricity"></el-input>
-        </div> -->
       </div>
-
-      <!-- <div class="app-titel" style="margin-top: 15px">
-        <div class="label">设备电量：</div>
-        <div>
-          <el-input v-model="value"></el-input>
-        </div>
-        <div class="label">是否在线：</div>
-        <div>
-          <el-select v-model="value" placeholder="请选择">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div>
-      </div> -->
       <div class="app-titel" style="margin-top: 15px">
         <div class="btn-group">
           <el-button type="primary" @click="screen">筛选</el-button>
         </div>
         <div class="btn-group">
-          <el-button @click="reset" type="text">清空筛选条件</el-button>      
-            <el-button style="margin-left:10px;" @click="isSystoleForm" type="text">{{isOpen?'收起':'展开'}}<i style="margin-left:5px;" :class="isOpen?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
-        </div>
-        <div style="margin-left: auto; margin-right: 10px;display: flex;">
-        <div class="btn-group" v-if="equ_state_open">
+          <el-button @click="reset" type="text">清空筛选条件</el-button>
           <el-button
-            @click="openAllLight()"
-            type="primary"
-            :disabled="multipleSelection.length == 0"
-            >批量开启指示灯</el-button
-          >
-        </div>
-        <div class="btn-group" v-if="equ_state_off">
-          <el-button
-            @click="closeAllLight()"
-            type="primary"
-            :disabled="multipleSelection.length == 0"
-            >批量关闭指示灯</el-button
-          >
-        </div>
-        <div class="btn-group" v-if="equ_state_back">
-          <el-button
-            @click="Batchreturn()"
-            type="primary"
-            :disabled="multipleSelection.length == 0"
-            >批量归还</el-button
-          >
-        </div>
-        <div class="btn-group" v-if="equ_state_tranfer">
-          <el-button
-            @click="infoMasstransfer()"
-            type="primary"
-            :disabled="multipleSelection.length == 0"
-            >批量转移</el-button
-          >
+            style="margin-left: 10px"
+            @click="isSystoleForm"
+            type="text"
+            >{{ isOpen ? "收起" : "展开"
+            }}<i
+              style="margin-left: 5px"
+              :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+            ></i
+          ></el-button>
         </div>
-        <div class="btn-group" v-if="equ_state_unbind">
-          <el-button
-            @click="zkequipmentUnbind()"
-            type="primary"
-            :disabled="multipleSelection.length == 0"
-            >批量解绑</el-button
-          >
-        </div>        
+        <div style="margin-left: auto; margin-right: 10px; display: flex">
+          <div class="btn-group" v-if="equ_state_open">
+            <el-button
+              @click="openAllLight()"
+              type="primary"
+              :disabled="multipleSelection.length == 0"
+              >批量开启指示灯</el-button
+            >
+          </div>
+          <div class="btn-group" v-if="equ_state_off">
+            <el-button
+              @click="closeAllLight()"
+              type="primary"
+              :disabled="multipleSelection.length == 0"
+              >批量关闭指示灯</el-button
+            >
+          </div>
+          <div class="btn-group" v-if="equ_state_back">
+            <el-button
+              @click="Batchreturn()"
+              type="primary"
+              :disabled="multipleSelection.length == 0"
+              >批量归还</el-button
+            >
+          </div>
+          <div class="btn-group" v-if="equ_state_tranfer">
+            <el-button
+              @click="infoMasstransfer()"
+              type="primary"
+              :disabled="multipleSelection.length == 0"
+              >批量转移</el-button
+            >
+          </div>
+          <div class="btn-group" v-if="equ_state_unbind">
+            <el-button
+              @click="zkequipmentUnbind()"
+              type="primary"
+              :disabled="multipleSelection.length == 0"
+              >批量解绑</el-button
+            >
+          </div>
 
-        <div
-           class="btn-group"
-          v-if="equ_state_downLoad"
-        >
-          <el-button @click="downLoad" icon="el-icon-download">导出</el-button>
-        </div>
+          <div class="btn-group" v-if="equ_state_downLoad">
+            <el-button @click="downLoad" icon="el-icon-download"
+              >导出</el-button
+            >
+          </div>
         </div>
       </div>
     </div>
@@ -340,189 +279,85 @@
         }}
         离线设备：{{ offLineCount || 0 }}
       </div>
-      <el-table
+      <avue-crud
+        ref="crud"
+        :page.sync="page"
         :data="tableData"
-        ref="table"
-        height="527px"
-        stripe
+        :table-loading="tableLoading"
+        :option="tableOption"
+        :show-column.sync="showColumn"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
         @selection-change="handleSelectionChange"
-        style="width: 100%"
-        :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
       >
-        <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column type="index" label="序号" align="center">
-        </el-table-column>
-        <el-table-column prop="imei" width="150" label="设备编号" align="center">
-          <template slot-scope="{ row }">
-            <el-tooltip class="item" effect="dark" :content="row.imei" placement="top-start">
-              <span style="display: block;width: 100%;"> {{row.imei || "-"}}</span>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-        <el-table-column prop="houseName" label="项目" align="center">
-        </el-table-column>
-        <el-table-column prop="userName" label="领用人" align="center">
-        </el-table-column>
-        <el-table-column prop="onLine" label="在线状态" align="center">
-          <template slot-scope="{ row }">
-            {{ row.onLine == 1 ? "在线" : "离线" }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="date" label="离线天数" align="center">
-        </el-table-column>
-        <el-table-column prop="recCmd" label="录音状态" align="center">
-          <template slot-scope="{ row }">
-            {{ row.recCmd == "start" ? "开启" : "关闭" }}
-          </template>
-        </el-table-column>
-        <!--<el-table-column
-          prop="simAudioUploadStatus"
-          label="上传状态"
-          align="center"
-        >
-          <template slot-scope="{ row }">
-            {{ row.simAudioUploadStatus=='true' ? "上传中" : "无上传" }}
-          </template>
-        </el-table-column>-->
-        <el-table-column prop="lightStatus" label="开机指示灯" align="center">
-          <template slot-scope="{ row }">
-            {{ row.lightStatus == "on" ? "开启" : "关闭" }}
-          </template>
-        </el-table-column>
-
-        <el-table-column
-          prop="name"
-          label="电池电量"
-          width="200"
-          align="center"
-        >
-          <template slot-scope="{ row }">
-            <el-progress
-              :percentage="row.electricity / 1"
-              :color="customColors"
-            ></el-progress>
-          </template>
-        </el-table-column>
-        <el-table-column prop="signalDevice" label="信号强度" align="center">
-        </el-table-column>
-        <el-table-column prop="fileCount" label="待上传文件" align="center">
-        </el-table-column>
-        <el-table-column
-          width="150"
-          prop="updateTime"
-          label="更新时间"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="openTime"
-          width="150"
-          label="开机时间"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="closeTime"
-          width="150"
-          label="关机时间"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column prop="offStatus" label="关机类型" align="center">
-          <template slot-scope="{ row }">
-            {{
-              row.offStatus == 1
-                ? "正常关机"
-                : row.offStatus == 2
-                ? "低电关机"
-                : row.offStatus == 3
-                ? "异常关机"
-                : ""
-            }}
-          </template>
-        </el-table-column>
-        <!--  scope -->
-        <el-table-column label="操作" align="center" fixed="right" width="80">
-          <template slot-scope="{ row }">
-            <!-- <div style="color: #2671e2" @click="toinifoThereturn()">
-              修改指示灯状态
-            </div> -->
-            <el-dropdown
-              v-if="
-                (row.receiveType == 2 && equ_state_take) ||
-                (row.houseName && equ_state_take) ||
-                equ_state_open ||
-                equ_state_WiFi ||
-                equ_state_Voice
+        <template slot="electricity" slot-scope="{ row }">
+          <el-progress
+            :percentage="row.electricity / 1"
+            :color="customColors"
+          ></el-progress>
+        </template>
+        <template slot-scope="{ row }" slot="menu">
+          <el-dropdown
+            v-if="
+              (row.receiveType == 2 && equ_state_take) ||
+              (row.houseName && equ_state_take) ||
+              equ_state_open ||
+              equ_state_WiFi ||
+              equ_state_Voice
+            "
+            @command="handleCommand($event, row)"
+            trigger="click"
+          >
+            <span
+              style="
+                color: #2671e2;
+                font-size: 12px;
+                margin-left: 10px;
+                cursor: pointer;
               "
-              @command="handleCommand($event, row)"
-              trigger="click"
             >
-              <span
-                style="
-                  color: #2671E2;
-                  font-size: 12px;
-                  margin-left: 10px;
-                  cursor: pointer;
-                "
+              更多<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                command="toinifoThereturn"
+                v-if="row.receiveType == 2 && equ_state_take"
+                >归还</el-dropdown-item
               >
-                更多<i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <!-- <el-dropdown-item command="toinifoThereturn" v-if="row.receiveType == 2" >归还</el-dropdown-item> -->
-                <el-dropdown-item
-                  command="toinifoThereturn"
-                  v-if="row.receiveType == 2 && equ_state_take"
-                  >归还</el-dropdown-item
-                >
-                <el-dropdown-item
-                  command="receive"
-                  v-if="row.houseName && equ_state_take && row.receiveType != 2"
-                  >领用</el-dropdown-item
-                >
-                <el-dropdown-item
-                  command="lightStatusChange"
-                  v-if="equ_state_open"
-                  >{{
-                    row.lightStatus == "on" ? "关闭" : "开启"
-                  }}指示灯</el-dropdown-item
-                >
-                <el-dropdown-item v-if="equ_state_WiFi" command="wifiShow"
-                  >WiFi管理</el-dropdown-item
-                >
-                <el-dropdown-item v-if="equ_state_Voice" command="voiceOpen"
-                  >录音{{
-                    row.recCmd == "start" ? "关闭" : "开启"
-                  }}</el-dropdown-item
-                >
-                <el-dropdown-item v-if="equ_state_equlog" command="equlog"
-                  >设备日志</el-dropdown-item
-                >
-              </el-dropdown-menu>
-
-
-            </el-dropdown>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[10, 30, 50]"
-          :page-size="size"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
+              <el-dropdown-item
+                command="receive"
+                v-if="row.houseName && equ_state_take && row.receiveType != 2"
+                >领用</el-dropdown-item
+              >
+              <el-dropdown-item
+                command="lightStatusChange"
+                v-if="equ_state_open"
+                >{{
+                  row.lightStatus == "on" ? "关闭" : "开启"
+                }}指示灯</el-dropdown-item
+              >
+              <el-dropdown-item v-if="equ_state_WiFi" command="wifiShow"
+                >WiFi管理</el-dropdown-item
+              >
+              <el-dropdown-item v-if="equ_state_Voice" command="voiceOpen"
+                >录音{{
+                  row.recCmd == "start" ? "关闭" : "开启"
+                }}</el-dropdown-item
+              >
+              <el-dropdown-item v-if="equ_state_equlog" command="equlog"
+                >设备日志</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </avue-crud>
     </div>
     <el-dialog
       title="领用"
       :visible.sync="receiveVisible"
       @close="resetReceive"
-      :center="true" width="600px"
+      :center="true"
+      width="600px"
     >
       <el-form
         :model="receiveForm"
@@ -555,7 +390,16 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="receiveVisible = false">取 消</el-button>
         <el-button type="primary" @click="saveReceive()">保存</el-button>
       </div>
@@ -593,13 +437,27 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+      <div
+        slot="footer"
+        class="dialog-footer"
+        style="
+          border-top: 1px solid #eee;
+          padding-top: 20px;
+          display: flex;
+          justify-content: end;
+        "
+      >
         <el-button @click="dialogVisible5 = false">取 消</el-button>
         <el-button type="primary" @click="Masstransfer()">保存</el-button>
       </div>
     </el-dialog>
 
-    <el-dialog title="WiFi管理" width="40%" :visible.sync="wifiVisible" :center="true" >
+    <el-dialog
+      title="WiFi管理"
+      width="40%"
+      :visible.sync="wifiVisible"
+      :center="true"
+    >
       <el-form
         :model="wifiForm"
         :rules="wifiRule"
@@ -608,7 +466,11 @@
         class="demo-ruleForm"
       >
         <el-form-item label="设备号" prop="imei">
-          <el-input v-model="wifiForm.imei" placeholder="设备号" disabled></el-input>
+          <el-input
+            v-model="wifiForm.imei"
+            placeholder="设备号"
+            disabled
+          ></el-input>
         </el-form-item>
         <div>主WiFi</div>
         <el-form-item label="wifi名称" prop="masterWifiName">
@@ -658,7 +520,14 @@
             placeholder="wifi密码"
           ></el-input>
         </el-form-item>
-        <el-form-item style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
+        <el-form-item
+          style="
+            border-top: 1px solid #eee;
+            padding-top: 20px;
+            display: flex;
+            justify-content: end;
+          "
+        >
           <el-button @click="wifiVisible = false" type="primary"
             >取消</el-button
           >
@@ -675,6 +544,16 @@ import { exportMethodPost } from "@/util/util";
 export default {
   data() {
     return {
+      tableIdName: "EquipmentState", // 当前页面需要的变量
+      tableOption: this.$tableOption.EquipmentState, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 30, // 每页显示多少条
+      },
+
       isOpen: false,
       options: [
         {
@@ -808,15 +687,7 @@ export default {
         houseId: "",
         // choic: "3",
       },
-      wifiForm: {
-        // imei:"",
-        // masterWifiName:"",
-        // masterWifiPassword:'',
-        // spareOneWifiName:"",
-        // spareOneWifiPassword:'',
-        // spareTwoWifiName:'',
-        // spareTwoWifiPassword:'',
-      },
+      wifiForm: {},
       receiveForm: {
         houseId: "",
         bindHouseName: "",
@@ -839,9 +710,6 @@ export default {
         batchId: { required: true, message: "请选择顾问", trigger: "blur" },
       },
       receiveVisible: false,
-      currentPage: 1,
-      size: 10,
-      total: 10,
       value: "",
       input: "",
       time: [],
@@ -856,12 +724,9 @@ export default {
       orgType: localStorage.getItem("orgType"),
       dialogVisible5: false,
       wifiVisible: false,
-      equ_state_equlog: false, 
+      equ_state_equlog: false,
       customColors: [
         { color: "red", percentage: 20 },
-        // { color: "#e6a23c", percentage: 40 },
-        // { color: "#5cb87a", percentage: 60 },
-        // { color: "#1989fa", percentage: 80 },
         { color: "#6f7ad3", percentage: 100 },
       ],
       options2: [
@@ -880,7 +745,19 @@ export default {
   computed: {
     ...mapGetters(["permissions"]),
   },
+
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
     this.equ_state_open = this.permissions["equ_state_open"];
     this.equ_state_off = this.permissions["equ_state_off"];
     this.equ_state_back = this.permissions["equ_state_back"];
@@ -890,7 +767,7 @@ export default {
     this.equ_state_WiFi = this.permissions["equ_state_WiFi"];
     this.equ_state_Voice = this.permissions["equ_state_Voice"];
     this.equ_state_downLoad = this.permissions["equ_state_downLoad"];
-  this.equ_state_equlog = this.permissions["equ_state_equlog"]
+    this.equ_state_equlog = this.permissions["equ_state_equlog"];
     if (this.orgType == 2 || this.orgType == 3) {
       this.houseTypes = "";
     }
@@ -911,8 +788,16 @@ export default {
     this.zkhousePage();
   },
   methods: {
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
     getPermissions(name) {
-      return this.permissions[name]
+      return this.permissions[name];
     },
     isSystoleForm() {
       this.isOpen = !this.isOpen;
@@ -1054,8 +939,8 @@ export default {
     getTableList() {
       this.$api.api
         .equipmentZxOnFindByPage({
-          size: this.size,
-          current: this.currentPage,
+          size: this.page.pageSize,
+          current: this.page.currentPage,
           timeType: 2,
           // orgType: localStorage.getItem("orgType"),
           // orgCode: localStorage.getItem("orgCode"),
@@ -1102,10 +987,10 @@ export default {
           this.onLineCount = res.data.onLineCount;
           this.offLineCount = res.data.offLineCount;
           this.workingCount = res.data.workingCount;
-          this.total = res.data.list.total;
-                    // 表格中设置ref属性，在数据渲染之后或者updated()之后
+          this.page.total = res.data.list.total;
+          // 表格中设置ref属性，在数据渲染之后或者updated()之后
           this.$nextTick(() => {
-            this.$refs.table.doLayout();
+            this.$refs.crud.doLayout();
           });
         });
     },
@@ -1229,7 +1114,7 @@ export default {
       };
     },
     screen() {
-      this.currentPage = 1;
+      this.page.currentPage = 1;
       // console.log(this.searchForm);
       this.getTableList();
     },
@@ -1256,7 +1141,7 @@ export default {
         electricity: "",
       };
       this.time = [];
-      this.currentPage = 1;
+      this.page.currentPage = 1;
       this.getTableList();
     },
     receive(row) {
@@ -1307,12 +1192,12 @@ export default {
     // 跳转设备日志页面
     equlog(row) {
       this.$router.push({
-        path: '/Equipment/equlog',
+        path: "/Equipment/equlog",
         query: {
           id: row.imei,
-          names: row.userName
-        }
-      })
+          names: row.userName,
+        },
+      });
     },
 
     voiceOpen(row) {
@@ -1489,37 +1374,17 @@ export default {
         this.searchForm.houseName = e;
       }
     },
-    // //批量归还
-    // toinifoThereturn() {
-    //   this.$confirm("确认更改吗?", "提示", {
-    //     confirmButtonText: "确定",
-    //     cancelButtonText: "取消",
-    //     type: "warning",
-    //   })
-    //     .then(() => {
-    //       this.$message({
-    //         type: "success",
-    //         message: "更改成功!",
-    //       });
-    //     })
-    //     .catch(() => {
-    //       this.$message({
-    //         type: "info",
-    //         message: "更改归还",
-    //       });
-    //     });
-    // },
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
-      this.size = val;
+      this.page.pageSize = val;
       this.getTableList();
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
-      this.currentPage = val;
+      this.page.currentPage = val;
       this.getTableList();
     },
   },

src/views/Equipment/table.js

@@ -0,0 +1,330 @@
+export default {
+    EquipmentState: {
+        border: true,
+        index: true,
+        height: 400,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        selection: true,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: '设备编号',
+                prop: "imei",
+                width: '150px',
+                overHidden: true,
+                formatter: data => {
+                    return data.imei || '-'
+                }
+            },
+            {
+                label: '项目',
+                prop: "houseName",
+                width: '150px',
+                overHidden: true,
+            },
+            {
+                label: '领用人',
+                prop: "userName",
+            },
+            {
+                label: '在线状态',
+                prop: "onLine",
+                formatter: data => {
+                    return data.onLine == 1 ? "在线" : "离线"
+                }
+            },
+            // 后端接口暂时没有离线天数字段，先注释，待开发 To doing
+            // {
+            //     label: '离线天数',
+            //     prop: "date",
+            // },
+            {
+                label: '录音状态',
+                prop: "recCmd",
+                formatter: data => {
+                    return data.recCmd == "start" ? "开启" : "关闭"
+                }
+            },
+            {
+                label: '开机指示灯',
+                width: '100px',
+                prop: "lightStatus",
+                formatter: data => {
+                    return data.lightStatus == "on" ? "开启" : "关闭"
+                }
+            },
+            {
+                label: '电池电量',
+                prop: "electricity",
+                width: '200px',
+                slot: true,
+            },
+            {
+                label: '信号强度',
+                prop: "signalDevice",
+            },
+            {
+                label: '待上传文件',
+                prop: "fileCount",
+                width: '100px',
+            },
+            {
+                label: '更新时间',
+                prop: "updateTime",
+                width: "170px",
+            },
+            {
+                label: '开机时间',
+                prop: "openTime",
+                width: "170px",
+            },
+            {
+                label: '关机时间',
+                prop: "closeTime",
+                width: "170px",
+            },
+            {
+                label: '关机类型',
+                prop: "offStatus",
+                formatter: row => {
+                    return row.offStatus == 1 ? "正常关机" : row.offStatus == 2 ? "低电关机" : row.offStatus == 3 ? "异常关机" : ""
+                }
+            },
+        ]
+    },
+
+    EquipmentIndex: {
+        border: true,
+        index: true,
+        height: 480,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        selection: true,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: '设备编号',
+                prop: "imei",
+                width: '150px',
+                overHidden: true,
+                formatter: data => {
+                    return data.imei || '-'
+                }
+            },
+            {
+                label: '批次号',
+                prop: "batchId",
+                width: '150px',
+                overHidden: true,
+                formatter: data => {
+                    return data.batchId || '-'
+                }
+            },
+            {
+                label: '代理商',
+                prop: "agentName",
+            },
+            {
+                label: '公司',
+                prop: "orgName",
+                width: '150px',
+                overHidden: true,
+                formatter: data => {
+                    return data.orgName || '-'
+                }
+            },
+            {
+                label: '项目',
+                prop: "houseName",
+                width: '150px',
+                overHidden: true,
+            },
+            {
+                label: '领用人',
+                prop: "userName",
+                width: '100px',
+                overHidden: true,
+            },
+            {
+                label: '领用人手机',
+                prop: "userPhone",
+                width: 150,
+            },
+            {
+                label: '领用状态',
+                prop: "receiveType",
+                formatter: row => {
+                    return row.receiveType == 1 ? "未领用" : row.receiveType == 2 ? "使用中" : "已归还"
+                }
+            },
+            {
+                label: '转写方式',
+                prop: "transliterationMethodName",
+            },
+            {
+                label: '设备状态',
+                prop: "acceptanceStatus",
+                formatter: row => {
+                    return row.acceptanceStatus == 0
+                        ? "已验收"
+                        : row.acceptanceStatus == 1
+                            ? "未验收"
+                            : row.acceptanceStatus == 2
+                                ? "维修中"
+                                : row.acceptanceStatus == 3
+                                    ? "更换中"
+                                    : "已报损"
+                }
+            },
+            {
+                label: '添加时间',
+                prop: "createTime",
+                width: "170px",
+            },
+            {
+                label: '绑定项目时间',
+                prop: "bindHouseTime",
+                width: "170px",
+            },
+        ]
+    },
+
+    EquipmentBatch: {
+        border: true,
+        index: false,
+        height: 550,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        selection: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: '批次号',
+                prop: "batchId",
+                width: '150px',
+                overHidden: true,
+            },
+            {
+                label: '设备号',
+                prop: "deviceNoStart",
+                formatter: row => {
+                    return `${row.deviceNoStart}:${row.deviceNoEnd}`
+                }
+            },
+            {
+                label: '应收设备数量',
+                prop: "realityEquipmentCount",
+            },
+            {
+                label: '实收设备数量',
+                prop: "receivableEquipmentCount",
+            },
+            {
+                label: '已验收设备数量',
+                prop: "acceptanceNum",
+            },
+            {
+                label: '创建时间',
+                prop: "createTime",
+            },
+            {
+                label: '备注',
+                prop: "remark",
+            },
+
+        ]
+    },
+
+    EquipmentRecord: {
+        border: true,
+        index: false,
+        height: 520,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: false,
+        align: "center",
+        refreshBtn: false,
+        selection: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: '设备编号',
+                prop: "equipImei",
+            },
+            {
+                label: '领用人',
+                prop: "userName",
+            },
+            {
+                label: '领用人手机',
+                prop: "phone",
+            },
+            {
+                label: '领用时间',
+                prop: "receiveBeginTime",
+            },
+            {
+                label: '领用操作人',
+                prop: "receiveOperationName",
+            },
+            {
+                label: '归还操作人',
+                prop: "backOperationName",
+            },
+            {
+                label: '领用状态',
+                prop: "receiveType",
+                formatter: row => {
+                    return row.receiveType == 1
+                        ? "未领用"
+                        : row.receiveType == 2
+                            ? "使用中"
+                            : "已归还"
+                }
+            },
+
+        ]
+    }
+}

src/views/File/index.vue

@@ -1,31 +1,45 @@
 <template>
-
   <div class="box-center">
     <!-- 头 -->
     <div class="app-top">
       <div class="app-titel" style="margin-top: 5px">
         <div class="label">用户名：</div>
         <div>
-             <el-input maxlength="10" placeholder="用户名" clearable v-model="username"></el-input>
+          <el-input
+            maxlength="10"
+            placeholder="用户名"
+            clearable
+            v-model="username"
+          ></el-input>
         </div>
         <div class="label">设备编号：</div>
         <div>
-           <el-input maxlength="20" placeholder="设备编号" clearable v-model="imei"></el-input>
+          <el-input
+            maxlength="20"
+            placeholder="设备编号"
+            clearable
+            v-model="imei"
+          ></el-input>
         </div>
         <div class="label">录音来源：</div>
         <div>
-            <el-select v-model="sourceCode" filterable clearable placeholder="请选择">
+          <el-select
+            v-model="sourceCode"
+            filterable
+            clearable
+            placeholder="请选择"
+          >
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
-              :value="item.value">
+              :value="item.value"
+            >
             </el-option>
           </el-select>
         </div>
       </div>
-        <div class="app-titel" style="margin-top: 15px">
-        <!-- <div class="label" style="color: #ffffff">筛选相关：</div> -->
+      <div class="app-titel" style="margin-top: 15px">
         <div style="margin-left: 16px">
           <el-button type="primary" @click="noempty()">筛选</el-button>
         </div>
@@ -37,7 +51,22 @@
 
     <!-- 表格 -->
     <div class="cen-tab">
-        <el-table
+      <avue-crud
+        ref="crud"
+        :page.sync="page"
+        :data="tableData"
+        :table-loading="tableLoading"
+        :option="tableOption"
+        :show-column.sync="showColumn"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template slot-scope="{ row }" slot="menu">
+              <i class="el-icon-video-play" @click="openPlayer(row)" style="font-size:20px;cursor: pointer;"></i>
+        </template>
+      </avue-crud>
+
+      <!-- <el-table
           :data="tableData"
           stripe
           ref="table"
@@ -97,6 +126,7 @@
             </template>
           </el-table-column>
         </el-table>
+
         <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
             <el-pagination
               @size-change="handleSizeChange"
@@ -107,20 +137,32 @@
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
             </el-pagination>
-        </div>
+        </div> -->
     </div>
 
     <el-dialog title="播放文件" :visible.sync="playerShow" @close="closeAudio">
-      <aplayer :audio="audio" ref="aplayer" :key="audio.url" :autoplay="true"  @timeupdate="handleEvent"></aplayer>
+      <aplayer
+        :audio="audio"
+        ref="aplayer"
+        :key="audio.url"
+        :autoplay="true"
+        @timeupdate="handleEvent"
+      ></aplayer>
       <div class="handly">
-        <div class="audioHanly" @click="backOff" >
-              <i class="el-icon-d-arrow-left" style="font-size:15px;color:#FFFFFF"></i>
+        <div class="audioHanly" @click="backOff">
+          <i
+            class="el-icon-d-arrow-left"
+            style="font-size: 15px; color: #ffffff"
+          ></i>
         </div>
         <div class="audioHanly" @click="fastForward">
-            <i class="el-icon-d-arrow-right" style="font-size:15px;color:#FFFFFF"></i>
+          <i
+            class="el-icon-d-arrow-right"
+            style="font-size: 15px; color: #ffffff"
+          ></i>
         </div>
       </div>
-      
+
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancleAudio">取 消</el-button>
       </div>
@@ -134,141 +176,169 @@ import { mapGetters } from "vuex";
 export default {
   data() {
     return {
-      hackReset:true,
-      audioPath:"",
-      playerShow:false,
+      tableIdName: "FileIndex", // 当前页面需要的变量
+      tableOption: this.$tableOption.FileIndex, // 当前table配置项
+      tableLoading: false, // 是否显示加载中
+      showColumn: [], // 监听的显示列的变量
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 30, // 每页显示多少条
+      },
+
+      hackReset: true,
+      audioPath: "",
+      playerShow: false,
       audio: {},
-      currentPage4:1,
       tableData: [],
       options: [
-         {value: '2',label: 'SIM设备'},
-         {value: '6',label: 'wifi设备'}
-        ],
-       username:'',
-       imei:'',
-       sourceCode:'',
-       size:10,
-       current:1,
-       total:0,
-       initAudioTime:0,
-       totalAudioTime:0
+        { value: "2", label: "SIM设备" },
+        { value: "6", label: "wifi设备" },
+      ],
+      username: "",
+      imei: "",
+      sourceCode: "",
+      initAudioTime: 0,
+      totalAudioTime: 0,
     };
   },
-  components:{
+  components: {
     // APlayer
   },
   computed: {
     ...mapGetters(["permissions"]),
   },
+
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
+
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
     this.file_index_upload = this.permissions["file_index_upload"];
     this.file_index_edit = this.permissions["file_index_edit"];
     this.file_index_start = this.permissions["file_index_start"];
   },
   mounted() {
-    this.audio = {}
-    this.filefindByPage()
+    this.audio = {};
+    this.filefindByPage();
   },
   methods: {
-    openPlayer(e){
-      this.initAudioTime = 0
-      this.audio.url = e.recordPath
-      this.audio.name = "设备编号： "+e.imei
-      this.audio.artist = ""
-      this.totalAudioTime = e.recordDuration*60
-      this.playerShow = true
-      
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
+    openPlayer(e) {
+      this.initAudioTime = 0;
+      this.audio.url = e.recordPath;
+      this.audio.name = "设备编号： " + e.imei;
+      this.audio.artist = "";
+      this.totalAudioTime = e.recordDuration * 60;
+      this.playerShow = true;
+
       // this.$refs.aplayer.seek(0)
     },
-    cancleAudio(){
-      this.totalAudioTime = 0
-      this.playerShow = false
+    cancleAudio() {
+      this.totalAudioTime = 0;
+      this.playerShow = false;
       this.$refs.aplayer.pause();
 
-      this.hackReset = false;//销毁组件
+      this.hackReset = false; //销毁组件
       this.$nextTick(() => {
-      this.audio={}
-        this.hackReset = true;//重建组件
+        this.audio = {};
+        this.hackReset = true; //重建组件
       });
     },
-    handleEvent(e){
-      this.initAudioTime = e.path[0].currentTime
+    handleEvent(e) {
+      this.initAudioTime = e.path[0].currentTime;
     },
     fastForward() {
-      
-      if(this.initAudioTime>=this.totalAudioTime){
-        this.initAudioTime = this.totalAudioTime
-      }else{
-        this.initAudioTime+=10
+      if (this.initAudioTime >= this.totalAudioTime) {
+        this.initAudioTime = this.totalAudioTime;
+      } else {
+        this.initAudioTime += 10;
       }
-      console.log("totol:"+this.totalAudioTime)
-      console.log("init:"+this.initAudioTime)
-      this.$refs.aplayer.seek(this.initAudioTime);;
+      console.log("totol:" + this.totalAudioTime);
+      console.log("init:" + this.initAudioTime);
+      this.$refs.aplayer.seek(this.initAudioTime);
     },
-    backOff(){
-      if(this.initAudioTime<=0){
-        this.initAudioTime = 0
-      }else{
-        this.initAudioTime-=10
+    backOff() {
+      if (this.initAudioTime <= 0) {
+        this.initAudioTime = 0;
+      } else {
+        this.initAudioTime -= 10;
       }
-      this.$refs.aplayer.seek(this.initAudioTime);;
+      this.$refs.aplayer.seek(this.initAudioTime);
     },
-    closeAudio(){
-      this.playerShow = false
-      
-      this.hackReset = false;//销毁组件
+    closeAudio() {
+      this.playerShow = false;
+
+      this.hackReset = false; //销毁组件
       this.$nextTick(() => {
-        this.audio={}
-        this.hackReset = true;//重建组件
+        this.audio = {};
+        this.hackReset = true; //重建组件
       });
     },
-    noempty(){
-        this.current=1;
-        this.filefindByPage()
+    noempty() {
+      this.page.currentPage = 1;
+      this.filefindByPage();
     },
-    empty(){
-        this.username='';
-        this.imei='';
-        this.sourceCode='';
-        this.current=1;
-        this.filefindByPage()
+    empty() {
+      this.username = "";
+      this.imei = "";
+      this.sourceCode = "";
+      this.page.currentPage = 1;
+      this.filefindByPage();
     },
-    filefindByPage(){
-        this.tableData=[];
-        this.$api.http.filefindByPage({
-          username:this.username,
-          imei:this.imei,
-          sourceCode:this.sourceCode/1||null,
-          size:this.size,
-          current:this.current
-        }).then((res) => {
-         res.data.records.map(item=>{
-           item.recordDuration=Math.floor(item.recordDuration/60)
-         })
-          this.tableData=res.data.records;
-          this.total=res.data.total
-                    // 表格中设置ref属性，在数据渲染之后或者updated()之后
+    filefindByPage() {
+      this.tableData = [];
+      this.$api.http
+        .filefindByPage({
+          username: this.username,
+          imei: this.imei,
+          sourceCode: this.sourceCode / 1 || null,
+          size: this.page.pageSize,
+          current: this.page.currentPage,
+        })
+        .then((res) => {
+          res.data.records.map((item) => {
+            item.recordDuration = Math.floor(item.recordDuration / 60);
+          });
+          this.tableData = res.data.records;
+          this.page.total = res.data.total;
+          // 表格中设置ref属性，在数据渲染之后或者updated()之后
           this.$nextTick(() => {
-            this.$refs.table.doLayout();
+            this.$refs.crud.doLayout();
           });
-        })
+        });
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.page.pageSize = val;
+      this.filefindByPage();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.page.currentPage = val;
+      this.filefindByPage();
     },
-     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.size=val;
-        this.filefindByPage()
-      },
-      handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.current=val;
-        this.filefindByPage()
-      }
   },
 };
 </script>
 
 <style scoped="scoped" lang="scss" >
-#avue-view{
+#avue-view {
   overflow: hidden;
 }
 .box-center {
@@ -277,10 +347,10 @@ export default {
   padding: 5px 15px 30px;
   min-width: 1000px;
 }
-.cen-tab{
+.cen-tab {
   width: 100%;
   padding: 15px;
-  background: #FFFFFF;
+  background: #ffffff;
   margin-top: 15px;
 }
 .tophove {
@@ -323,57 +393,57 @@ export default {
     }
   }
 }
-/deep/ .aplayer-list{
+/deep/ .aplayer-list {
   height: auto !important;
 }
-/deep/ .aplayer-pic{
+/deep/ .aplayer-pic {
   background-color: rgb(183, 218, 255) !important;
   background-image: none !important;
 }
 
-.handly{
+.handly {
   margin: 10px auto;
   width: 100px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.audioHanly{
-    background: #7bb3ef;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    cursor: pointer;
-    transition: all 0.5s linear 0.05s;
-    &:hover{
-      background:#6e8dad;
-      box-shadow: 2px 2px 12px 4px #d5d5d5;
-    }
+.audioHanly {
+  background: #7bb3ef;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+  transition: all 0.5s linear 0.05s;
+  &:hover {
+    background: #6e8dad;
+    box-shadow: 2px 2px 12px 4px #d5d5d5;
+  }
 }
-/deep/ .el-table__header-wrapper{
-  thead{
-    tr{
-      .is-leaf{
-        background: #F5F7FA;
+/deep/ .el-table__header-wrapper {
+  thead {
+    tr {
+      .is-leaf {
+        background: #f5f7fa;
         color: #333333;
       }
     }
   }
 }
-/deep/ .el-dialog--center{
+/deep/ .el-dialog--center {
   border-radius: 8px;
-  .el-dialog__title{
+  .el-dialog__title {
     font-weight: bold;
   }
 }
-/deep/ .el-button--primary{
-  background: #2671E2 !important;
-  border: 1px solid #2671E2 !important;
+/deep/ .el-button--primary {
+  background: #2671e2 !important;
+  border: 1px solid #2671e2 !important;
 }
-/deep/ .el-button--text{
-  color: #2671E2;
+/deep/ .el-button--text {
+  color: #2671e2;
 }
 </style>

src/views/File/table.js

@@ -0,0 +1,51 @@
+export default {
+    FileIndex: {
+        border: true,
+        index: false,
+        height: 500,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        selection: true,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: '用户名',
+                prop: "username",
+            },
+            {
+                label: '录音来源',
+                prop: "sourceCode",
+                formatter: row => {
+                    return row.sourceCode == 2 ? "SIM设备" : row.sourceCode == 6 ? "wifi设备" : "" 
+                }
+            },
+            {
+                label: '设备编号',
+                prop: "imei",
+            },
+            {
+                label: '录音时长',
+                prop: "recordDuration",
+            },
+            {
+                label: '录音结束时间',
+                prop: "recordEndTime",
+            },
+            {
+                label: '文件上传时间',
+                prop: "receptionTime",
+            },
+        ]
+    }
+}

src/views/admin/user/table.js

@@ -0,0 +1,112 @@
+export default {
+    adminUserIndex: {
+        border: true,
+        index: false,
+        height: 533,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        selection: true,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: '用户名',
+                prop: "name",
+            },
+            {
+                label: '登录手机',
+                prop: "username",
+            },
+            {
+                label: '组织类型',
+                prop: "orgTypeName",
+            },
+            {
+                label: '性别',
+                prop: "sex",
+                formatter: row => {
+                    return row.sex == 0 ? "男" : "女" 
+                }
+            },
+            {
+                label: '注册时间',
+                prop: "createTime",
+            },
+            {
+                label: '用户密码',
+                prop: "resultPwd",
+                hide: true,
+                showColumn: false,
+            },
+
+        ]
+    },
+    adminUserIndexs: {
+        border: true,
+        index: false,
+        height: 500,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "center",
+        refreshBtn: false,
+        selection: true,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: '用户名',
+                prop: "name",
+            },
+            {
+                label: '登录手机',
+                prop: "username",
+            },
+            {
+                label: '所属组织',
+                prop: "orgName",
+            },
+            {
+                label: '组织类型',
+                prop: "orgTypeName",
+            },
+            {
+                label: '组织角色',
+                prop: "roleName",
+            },
+            {
+                label: '用户身份',
+                prop: "userRoleTypeName",
+            },
+            {
+                label: '状态',
+                prop: "lockFlag",
+                formatter: row => {
+                    return row.lockFlag == 0 ? "启用" : "禁用"
+                }
+            },
+            {
+                label: '添加时间',
+                prop: "createTime",
+                width: "160px",
+            },
+        ]
+    }
+}