UbrList.vue

<template>
  <div class="eibs-tab">
    <div style="text-align: right">
      <c-button size="small" type="primary" @click="ubrAdd()" :disabled="false"> 新增 </c-button>
    </div>
    <el-form-item label="" label-width="0" prop="ubrList">
      <c-table :columnsConfig="columns" :list="model.ubrList">
        <c-table-column fixed="right" prop="op" label="操作" width="200px">
          <template slot-scope="{ scope }">
            <button
                class="el-button el-button--default el-button--small"
                style="margin-left: 0"
                size="small"
                :disabled="false"
                @click.prevent="ubrInfo(scope.$index, scope.row)"
            >
              <span>详情</span>
            </button>
            <c-button
                style="margin-left: 5px"
                size="small"
                type="primary"
                @click="ubrEdit(scope.$index, scope.row)"
            >
              修改
            </c-button>
            <c-button
                style="margin-left: 5px"
                size="small"
                type="primary"
                @click="ubrDelete(scope.$index, scope.row)"
            >
              删除
            </c-button>
          </template>
        </c-table-column>
      </c-table>
    </el-form-item>

    <el-dialog
        :title="
        '柜员权限信息：' +
        (operate === 'details' ? '详情' : operate === 'edit' ? '修改' : '新增')
      "
        :visible.sync="ubrDialog"
        top="10vh"
        width="80%"
        :destroy-on-close="true"
        :before-close="handleClose"
    >
      <m-ubr-inf ref="ubr" :ubr="ubr" :operate="operate"></m-ubr-inf>
      <span slot="footer" class="dialog-footer">
        <button
            class="el-button el-button--default el-button--small"
            style="margin-left: 0"
            size="small"
            :disabled="false"
            @click.prevent="cancel"
        >
          <span>取 消</span>
        </button>
        <c-button type="primary" @click="cancel" v-if="operate === 'details'"
        >确 定</c-button
        >
        <c-button type="primary" @click="editUbr" v-if="operate === 'edit'"
        >保 存</c-button
        >
        <c-button type="primary" @click="saveUbr" v-if="operate === 'add'"
        >保 存</c-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Ubr from "./Ubr";
import UbrInfo from "./UbrInfo";

import {
  addUbrData,
  updateUbrData,
  deleteUbrData,
} from "~/service/test/usr";

export default {
  name: "UbrList",
  props: ["model"],
  inject: ["root"],
  components: {
    "m-ubr-inf": UbrInfo,
  },
  data() {
    return {
      ubrDialog: false,
      ubr: null,
      operate: "",
      operateIdx: 0,
      columns: [
        //  表结构说明:
        // { label: '唯一ID', prop: 'inr', width: 'auto' },
        { label: '用户ID', prop: 'usrinr', width: 'auto' },
        { label: '交易名', prop: 'bussec', width: 'auto' },
        { label: '授权币种', prop: 'relcur', width: 'auto' },
        { label: '授权金额', prop: 'relamt', width: 'auto' },
        { label: '第二授权金额', prop: 'relamt2nd', width: 'auto' },
        { label: '授权状态', prop: 'relgrp', width: 'auto' },
        { label: '交易代码', prop: 'trncod', width: 'auto' },
        { label: '交易所属机构', prop: 'branchinr', width: 'auto' },
        { label: '一次性授权', prop: 'autcur', width: 'auto' },
        { label: '一次性释放授权', prop: 'autamt', width: 'auto' },
      ],
    };
  },

  methods: {
    /**
     * 详情
     */
    ubrInfo(index, row) {
      this.ubr = { ...row };
      this.operate = "details";
      this.operateIdx = index;
      this.ubrDialog = true;
    },
    /**
     * 新增
     */
    ubrAdd() {
      this.ubr = new Ubr().data;
      this.ubr.usrinr=this.model.inr;
      this.operate = "add";
      this.ubrDialog = true;
    },
    /**
     * 修改
     */
    ubrEdit(index, row) {
      this.ubr = { ...row };
      this.operate = "edit";
      this.operateIdx = index;
      this.ubrDialog = true;
    },
    /**
     * 删除
     */
    ubrDelete(index, row) {
      this.$confirm("是否真的删除？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        deleteUbrData(row.inr).then((res) => {
          if (res) {
            this.model.ubrList.splice(index, 1);
            this.$message.success("删除成功！");
          } else {
            this.$message.error("删除失败！");
          }
        });
      });
    },
    cancel() {
      this.handleClose();
    },
    editUbr() {
      this.$refs.ubr.$refs.modelForm.validate((validated) => {
        if (validated) {
          updateUbrData(this.ubr)
              .then((res) => {
                if (res) {
                  this.$message.success("修改柜员权限信息成功！");
                  //TODO model.uclList回填
                  this.model.ubrList = res.ubrList;
                  this.handleClose();
                }
              })
              .catch((error) => {
                this.$message.error("修改柜员权限信息失败！");
              });
        }
      });
    },

    saveUbr() {
      for (const key in this.ubr) {
        if (Object.hasOwnProperty.call(this.ubr, key)) {
          const v = this.ubr[key];
          if (typeof v === 'string' && v === '') {
            this.ubr[key] = " "
          }
        }
      }
      if (this.root.type === "add") {
        this.model.ubrList.push(this.ubr);
        this.handleClose();
      } else {
        this.$refs.ubr.$refs.modelForm.validate((validated) => {
          if (validated) {
            // this.ubr.inr = this.model.inr
                addUbrData(this.ubr)
                .then((res) => {
                  if (res) {
                    this.$message.success("保存柜员权限信息成功！");
                    //TODO model.uclList回填
                    // this.model.ubrList = res.ubrList;
                    this.model.ubrList = res.ubrList;
                    this.handleClose();
                  }
                })
                .catch((error) => {
                  this.$message.error("保存柜员权限信息失败！");
                });
          }
        });
      }
    },

    handleClose(done) {
      this.ubrDialog = false;
      if (done && typeof done === "function") {
        done();
      }
    },
  },
};
</script>

<style>
</style>