llh_project/src/views/certificate/index.vue

<template lang="html">
  <div id="certificate">
    <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 v-if="scope.row.state == 1" type="danger" icon="el-icon-delete" @click="open1(scope.$index)">注销</el-button>
            <el-button v-if="scope.row.state == 0" type="success" icon="el-icon-setting" @click="open2(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%" type="password"></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%" type="password"></el-input>
        </el-row>
        <el-row :span="24" style="margin-top: 15px;">请重新输入新密码:&nbsp;<el-input v-model="input3" style="width:70%" type="password"></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: '',
    input1: '',
    input2: '',
    input3: '',
    value: [],
    dialogFormVisible: false,
    form: {
      way: '',
    },
    formLabelWidth: '120px',
  }),
  created() {},
  computed: {},
  methods: {
    open1(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: '已取消',
          });
        });
    },
    open2(num) {
      console.log(num);
      this.$confirm('确认恢复此用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$set(this.tableData[num], `state`, '1');
          this.$message({
            type: 'success',
            message: '恢复成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>