luohe_fronted/src/pages/index/components/credential_management_function.vue

<template>
  <div class="body-wrapper">
    <el-form class="form-wrapper" :inline="true" :model="formInline">
      <el-row>
        <el-col :span="8">
          <el-form-item label="凭证名称">
            <el-input v-model="formInline.voucherName" placeholder="请输入凭证名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="success" @click="handleAdd">添加凭证</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod">
      </el-table-column>
      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope" style="display: inline-block">
          <el-button type="primary" @click="handleEdit(scope.row)" slot="reference">修改</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="deleteRow(scope.row)">
            <el-button type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
        :current-page.sync="pageNum" :page-size.sync="pageSize">
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
      custom-class="audit-dialog">
      <el-form ref="formLabelAlign"  style="height: 100px" class="form-div" label-position="left" label-width="100px" :model="formLabelAlign">
        <el-form-item label="凭证ID" required>
          <el-input v-model="formLabelAlign.voucherId"></el-input>
        </el-form-item>
        <el-form-item label="凭证名称" required>
          <el-input v-model="formLabelAlign.voucherName"></el-input>
        </el-form-item>
        <el-form-item label="凭证有效期" required>
          <el-date-picker
            v-model="formLabelAlign.voucherDate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm('formLabelAlign')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/api/audit.js";

export default {
    components: {},
    data() {
      return {
        formInline: {
          voucherName: ''
        },
        columns: [
          {
            label: '凭证ID',
            key: 'voucherId'
          },
          {
            label: '凭证名称',
            key: 'voucherName'
          },
          {
            label: '有效期',
            key: 'voucherDate'
          }
        ],
        tableData: [],
        total: 0,
        pageSize: 10,
        pageNum: 1,
        dialogVisible: false,
        title: '',
        formLabelAlign: {
          voucherId: '',
          voucherName: '',
          voucherDate: '',
        }
      }
    },
    mounted() {
      this.getTableData()
    },
    watch: {
    },
    methods: {
      onSubmit () {
        this.getTableData()
      },
      indexMethod(index) {
        return this.pageSize * (this.pageNum - 1) + index + 1
      },
      handleEdit(row) {
        this.title = '修改凭证'
        this.formLabelAlign = row
        this.dialogVisible = true
      },
      handleAdd () {
        this.title = '添加凭证'
        this.formLabelAlign = {}
        this.dialogVisible = true
      },
      deleteRow (record) {
        api.deletePz({id: record.id}).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
            this.getTableData()
          }
        })
      },
      handlePageChange() {
        this.getTableData()
      },
      handleConfirm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {...this.formLabelAlign, voucherDate: this.formLabelAlign.voucherDate.substring(0, 10) + " 23:59:59"}
            if (this.title === '修改凭证') {
              api.addPz(params).then(res => {
                if(res.code === 200) {
                  this.dialogVisible = false
                  this.$message({
                    message: '修改成功!',
                    type: 'success'
                  })
                  this.getTableData()
                }
              })
            } else {
              let params = {...this.formLabelAlign, voucherDate: this.formLabelAlign.voucherDate.substring(0, 10) + " 23:59:59"}
              api.addPz(params).then(res => {
                if(res.code === 200) {
                  this.dialogVisible = false
                  this.$message({
                    message: '添加成功!',
                    type: 'success'
                  })
                  this.getTableData()
                }
              })
            }

          } else {
            return false;
          }
        });
      },
      getTableData() {
        const {pageNum, pageSize} = this
        api.pzglListByPage({current: pageNum, size: pageSize, voucherName: this.formInline.voucherName}).then(res => {
          this.tableData = res.data.records || []
          this.total = res.data.total
        })
      }
    }
}
</script>
<style  lang="scss" scoped>
.form-wrapper {
  margin-bottom: 20px;
}
/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}
/deep/ .el-select {
  height: 40px;
  .el-input__inner {
    height: 40px;
  }
  .el-input__prefix, .el-input__suffix {
    height: 40px;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 32px + 2px =34px */
  .el-input__icon {
    line-height: 0px;
  }
}
/deep/ .form-wrapper .el-button {
  background: linear-gradient(90deg,#0158d9,#3c97e4);
  width: 100px;
  height: 40px;
}

.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
  .search-card{
    margin-bottom: 20px;
    text-align: center;
    .input-wrapper{
      width: 36%;
    }
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
  .form-div{
    /deep/ .el-input__inner{
      height: 35px;
      width: 100%;
      border: 1px solid #a6a5a5;
      color: #fff;
      background: #2d3744;
    }
    /deep/ .el-input__icon {
      line-height: 35px;
    }
  }
}
</style>