Merge branch 'master' of http://git.cc-lotus.info/lrf402788946/llh_project

src/views/certificate/index.vue

@@ -1,30 +1,151 @@
 <template lang="html">
   <div id="certificate">
-    <el-row :span="12">
-      <el-input placeholder="请输入内容" v-model="input">
-        <el-select v-model="select" slot="prepend" placeholder="请选择">
-          <el-option label="餐厅名" value="1"></el-option>
-          <el-option label="订单号" value="2"></el-option>
-          <el-option label="用户电话" value="3"></el-option>
-        </el-select>
-        <el-button slot="append" icon="el-icon-search"></el-button>
-      </el-input>
+    <span style="padding:1rem;font-size:25px ">凭证管理</span>
+    <el-row style="padding:2rem;">
+      <el-col :span="12">
+        <el-input placeholder="请输入需查询用户信息" v-model="input">
+          <el-select v-model="value" slot="prepend" multiple placeholder="请选择查询凭证方式" style="width: 224px;">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+          <el-button slot="append" icon="el-icon-search"></el-button>
+        </el-input>
+      </el-col>
     </el-row>
+    <el-row style="padding:2rem;">
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column align="center" prop="user" label="用户" width="200"> </el-table-column>
+        <el-table-column align="center" prop="word" label="口令"> </el-table-column>
+        <el-table-column align="center" prop="certificate" label="证书"> </el-table-column>
+        <el-table-column align="center" prop="fingerprint" label="指纹"> </el-table-column>
+        <el-table-column align="center" prop="state" label="状态">
+          <template v-slot="scope">
+            {{ scope.row.state === '0' ? '冻结' : '使用中' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="300">
+          <template v-slot="scope">
+            <el-button icon="el-icon-edit" @click="dialogFormVisible = true">修改</el-button>
+            <el-button type="danger" icon="el-icon-delete" @click="open(scope.$index)">注销</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-dialog title="修改信息" :visible.sync="dialogFormVisible" width="25%">
+      <el-form :model="form">
+        <el-form-item label="凭证方式">
+          <el-select v-model="form.way" placeholder="请选择凭证方式">
+            <el-option label="口令" value="1"></el-option>
+            <el-option label="证书" value="2"></el-option>
+            <el-option label="指纹" value="3"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div v-if="form.way == 1">
+        <el-row :span="24" style="margin-top: 15px;">
+          请输入旧密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input v-model="input1" style="width:70%"></el-input>
+        </el-row>
+        <el-row :span="24" style="margin-top: 15px;">
+          请输入新密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input v-model="input2" style="width:70%"></el-input>
+        </el-row>
+        <el-row :span="24" style="margin-top: 15px;">请重新输入新密码:&nbsp;<el-input v-model="input3" style="width:70%"></el-input></el-row>
+      </div>
+      <div v-if="form.way == 2"><span>请重新验证证书</span></div>
+      <div v-if="form.way == 3"><span>请将手指放置在仪器上，并录入指纹</span></div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { log } from 'util';
 export default {
   name: 'certificate',
   props: {},
   components: {},
   data: () => ({
+    options: [
+      {
+        value: '选项1',
+        label: '指纹',
+      },
+      {
+        value: '选项2',
+        label: '口令',
+      },
+      {
+        value: '选项3',
+        label: '证书',
+      },
+    ],
+    tableData: [
+      {
+        user: 'Zedc',
+        word: '******',
+        certificate: '已认证',
+        fingerprint: '未录入',
+        state: '1',
+      },
+      {
+        user: 'Abc',
+        word: '******',
+        certificate: '未认证',
+        fingerprint: '未录入',
+        state: '0',
+      },
+      {
+        user: 'aBc',
+        word: '******',
+        certificate: '已认证',
+        fingerprint: '已录入',
+        state: '0',
+      },
+      {
+        user: 'abC',
+        word: '******',
+        certificate: '未认证',
+        fingerprint: '已录入',
+        state: '1',
+      },
+    ],
     input: '',
-    select: '',
+    input1: '',
+    input2: '',
+    input3: '',
+    value: [],
+    dialogFormVisible: false,
+    form: {
+      way: '',
+    },
+    formLabelWidth: '120px',
   }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    open(num) {
+      console.log(num);
+      this.$confirm('确认注销此用户吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$set(this.tableData[num], `state`, '0');
+          this.$message({
+            type: 'success',
+            message: '注销成功!',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消',
+          });
+        });
+    },
+  },
 };
 </script>