格式化列表字段

eladmin-web/src/views/polling/jczlcx/index.vue

@@ -4,34 +4,36 @@
     <div class="head-container">
       <div v-if="crud.props.searchToggle">
         <!-- 搜索 -->
-        <el-input v-model="query.xingming" clearable placeholder="姓名" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <date-range-picker v-model="query.crrq" class="date-item" />
-        <rrOperation />
+        <el-input v-model="query.xingming" clearable placeholder="姓名" style="width: 200px" class="filter-item"
+                  @keyup.enter.native="crud.toQuery"/>
+        <date-range-picker v-model="query.crrq" class="date-item"/>
+        <rrOperation/>
       </div>
-      <crudOperation :permission="permission" />
+      <crudOperation :permission="permission"/>
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
+               :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
       <el-form ref="form" :disabled="crud.status.CHECK" :model="form" :rules="rules" size="small" label-width="130px">
         <el-row :gutter="20">
           <el-col :span="8">
             <div class="grid-content bg-purple">
               <el-form-item label="证件类型" prop="zjlx">
-                <el-input v-model="form.zjlx" style="width: 370px" />
+                <el-input v-model="form.zjlx" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="grid-content bg-purple-light">
               <el-form-item label="证件号码" prop="zjhm">
-                <el-input v-model="form.zjhm" style="width: 370px" />
+                <el-input v-model="form.zjhm" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="grid-content bg-purple">
               <el-form-item label="状态" prop="status">
-                <el-input v-model="form.status" type="textarea" style="width: 370px" />
+                <el-input v-model="form.status" type="textarea" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
@@ -40,15 +42,15 @@
           <el-col :span="8">
             <div class="grid-content bg-purple">
               <el-form-item label="姓名" prop="xingming">
-                <el-input v-model.number="form.xingming" style="width: 370px;" />
+                <el-input v-model.number="form.xingming" style="width: 370px;"/>
               </el-form-item>
             </div>
           </el-col>
           <el-col :span="8">
             <el-form-item label="插入日期" prop="crrq">
-              <el-input v-model.number="form.crrq" style="width: 370px;" />
+              <el-input v-model.number="form.crrq" style="width: 370px;"/>
             </el-form-item>
-            <div class="grid-content bg-purple-light" />
+            <div class="grid-content bg-purple-light"/>
           </el-col>
         </el-row>
         <el-divider content-position="left">返回参数</el-divider>
@@ -56,21 +58,21 @@
           <el-col :span="8">
             <div class="grid-content bg-purple">
               <el-form-item label="开户中心编号" prop="KHZXBH">
-                <el-input v-model="form.KHZXBH" style="width: 370px" />
+                <el-input v-model="form.KHZXBH" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="grid-content bg-purple-light">
               <el-form-item label="开户中心名称" prop="KHZXMC">
-                <el-input v-model="form.KHZXMC" style="width: 370px" />
+                <el-input v-model="form.KHZXMC" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="grid-content bg-purple">
               <el-form-item label="单位账号" prop="DWZH">
-                <el-input v-model="form.DWZH" style="width: 370px" />
+                <el-input v-model="form.DWZH" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
@@ -79,21 +81,21 @@
           <el-col :span="8">
             <div class="grid-content bg-purple">
               <el-form-item label="个人账号" prop="GRZH">
-                <el-input v-model="form.GRZH" style="width: 370px" />
+                <el-input v-model="form.GRZH" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="grid-content bg-purple-light">
               <el-form-item label="个人账户状态" prop="GRZHZT">
-                <el-input v-model="form.GRZHZT" style="width: 370px" />
+                <el-input v-model="form.GRZHZT" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="grid-content bg-purple">
               <el-form-item label="数据插入日期" prop="CRRQ">
-                <el-input v-model="form.CRRQ" style="width: 370px" />
+                <el-input v-model="form.CRRQ" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
@@ -102,7 +104,7 @@
           <el-col :span="8">
             <div class="grid-content bg-purple">
               <el-form-item label="报文返回日期" prop="ZXZWRQ">
-                <el-input v-model="form.ZXZWRQ" style="width: 370px" />
+                <el-input v-model="form.ZXZWRQ" style="width: 370px"/>
               </el-form-item>
             </div>
           </el-col>
@@ -121,7 +123,8 @@
       </div>
     </el-dialog>
     <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%" @selection-change="crud.selectionChangeHandler">
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%"
+              @selection-change="crud.selectionChangeHandler">
       <el-table-column v-if="checkPer(['admin','serverDeploy:check'])" label="操作" width="150px" align="center">
         <template slot-scope="scope">
           <Retrieve
@@ -132,31 +135,32 @@
         </template>
       </el-table-column>
       <!--            <el-table-column type="selection" width="55" />-->
-      <el-table-column prop="zjlx" label="证件类型" />
-      <el-table-column prop="zjhm" label="证件号码" />
-      <el-table-column prop="status" label="状态" />
-      <el-table-column prop="xingming" label="姓名" />
-      <el-table-column prop="crrq" label="插入日期" />
+      <el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat"/>
+      <el-table-column prop="zjhm" label="证件号码"/>
+      <el-table-column prop="status" label="状态"/>
+      <el-table-column prop="xingming" label="姓名"/>
+      <el-table-column prop="crrq" label="插入日期"/>
     </el-table>
     <!--分页组件-->
-    <pagination />
+    <pagination/>
   </div>
 </template>
 
 <script>
 
-import { testServerConnect } from '@/api/mnt/connect'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import {testServerConnect} from '@/api/mnt/connect'
+import CRUD, {presenter, header, form, crud} from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
 import DateRangePicker from '@/components/DateRangePicker'
 import crudOperation from '@crud/CRUD.operation'
 import Retrieve from "@crud/Retrieve";
-const defaultForm = { id: null, name: null, ip: null, port: 22, account: 'root', password: null }
+
+const defaultForm = {id: null, name: null, ip: null, port: 22, account: 'root', password: null}
 export default {
   name: 'Jczlcx',
-  components: {Retrieve, pagination, rrOperation, udOperation, DateRangePicker, crudOperation },
+  components: {Retrieve, pagination, rrOperation, udOperation, DateRangePicker, crudOperation},
   cruds() {
     return CRUD({
       title: '缴存总览详情',
@@ -175,9 +179,9 @@ export default {
     return {
       //明细请求参数
       queryList: {
-        status:true,
-        url:"api/JczlcxController/QueryJczlcxFhmx",
-        id:""
+        status: true,
+        url: "api/JczlcxController/QueryJczlcxFhmx",
+        id: ""
       },
       // currView: 'index',
       accountList: [],
@@ -187,12 +191,25 @@ export default {
       // 规则验证
       rules: {
         Demo: [
-          { required: true, message: '请输入Demo', trigger: 'blur' }
+          {required: true, message: '请输入Demo', trigger: 'blur'}
         ]
       }
     }
   },
   methods: {
+    /**
+     * @param row 当前行元素
+     * @returns {string}
+     */
+    zjlxFormat(row) {
+      //todo-sn 2021/11/2 16:46 Ash: 未完成，只是个Demo，补全代码
+      switch (row.zjlx) {
+        case '01':
+          return "身份证";
+        case '02':
+          return "军官证";
+      }
+    },
     testConnectServer() {
       this.$refs['form'].validate((valid) => {
         if (valid) {