Infsea.vue

<template>
  <div class="eibs-tab">
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="费用代码">
          <el-select v-model="model.cod" clearable placeholder="请选择" filterable>
            <el-option v-for="item in feeCodList" :key="item.codFee" :label="item.codFee+' - '+item.coddscFee"
              :value="item.codFee">
              <span style="float: left">{{ item.codFee+' - '+item.coddscFee }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="24">
      <span style="float: left">
        <el-button type="primary" size="small" ref="feeInsertBtn" v-if="isShowAddBtn" @click="feeAdd">新增</el-button>
      </span>
      <span style="float: right">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="onSearch()">查询
        </el-button>
      </span>
    </c-col>
    <c-col :span="24">
      <c-paging-table :data="feeData" :columns="feeColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true">
        <c-table-column fixed="right" prop="op" label="操作" width="240px">
          <template slot-scope="{ scope }">
            <c-button style="margin-left: 5px" size="small" type="info" ref="feeDisplayBtn"
              @click="feeDisplay(scope.row)">详情</c-button>
            <c-button style="margin-left: 5px" size="small" type="primary" v-if="isShowUpdBtn" ref="feeUpdateBtn"
              @click="feeEdit(scope.row)">修改</c-button>
            <c-button size="small" style="margin-left: 5px" type="danger" v-if="isShowDelBtn" ref="feeDeleteBtn"
              @click="feeDelete(scope.row)">删除</c-button>
          </template>
        </c-table-column>
      </c-paging-table>
    </c-col>

    <el-dialog :title="dialogNam[feetyp]" :visible.sync="dialogAdd" :modal-append-to-body="false"
      :close-on-click-modal="false" destroy-on-close width="75%" draggable>
      <el-form :model="form" ref="modelForm" label-suffix="：" :rules="rules" :disabled="isDisabled">
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="费用代码" :label-width="formLabelWidth" prop="cod">
              <c-input v-model="form.cod" autocomplete="off" placeholder="请输入费用代码" @change="queryCodOnly"
                :disabled="feetyp=='edit'"></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="费用名称" :label-width="formLabelWidth" prop="coddsc">
              <c-input v-model="form.coddsc" autocomplete="off" placeholder="请选择费用名称"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="计算金额类型" :label-width="formLabelWidth" prop="reltir">
              <c-select v-model="form.reltir" autocomplete="off" placeholder="请输入计算金额类型" dbCode="FECAMT"
                :isCache="false"></c-select>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="SWIFT费用代码" :label-width="formLabelWidth" prop="sftcod">
              <c-select v-model="form.sftcod" autocomplete="off" placeholder="请输入SWIFT费用代码" dbCode="FEESFT"
                :isCache="false"></c-select>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="是否计入收入标志" :label-width="formLabelWidth" prop="incflg">
              <el-radio v-model="form.incflg" label="Y">是</el-radio>
              <el-radio v-model="form.incflg" label="">否</el-radio>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="DTA报文费用代码" :label-width="formLabelWidth" prop="dtacod">
              <c-select v-model="form.dtacod" autocomplete="off" placeholder="请选择DTA报文费用代码" dbCode="DTACOD"
                :isShowKeyAndLabel="true" filterable></c-select>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="默认付费角色" :label-width="formLabelWidth" prop="rol">
              <c-select v-model="form.rol" autocomplete="off" placeholder="请输入默认付费角色" dbCode="ROLALL" filterable
                :filterKey="['CLI','COR']" :isCache="false"></c-select>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="费用账号" :label-width="formLabelWidth" prop="acc">
              <c-input v-model="form.acc" autocomplete="off" placeholder="请选择费用账号"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="统计标志" :label-width="formLabelWidth" prop="staflg">
              <c-select v-model="form.staflg" autocomplete="off" placeholder="请输入统计标志" dbCode="STAFLG" :isCache="false">
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="费用名称是否允许修改" :label-width="formLabelWidth" prop="dscmodflg">
              <el-radio v-model="form.dscmodflg" label="X">是</el-radio>
              <el-radio v-model="form.dscmodflg" label="">否</el-radio>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="价税分离标志" :label-width="formLabelWidth" prop="taxflg">
              <el-radio v-model="form.taxflg" label="Y">是</el-radio>
              <el-radio v-model="form.taxflg" label="N" @change="clearTaxAcc">否</el-radio>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="税则账号" :label-width="formLabelWidth" prop="taxacc" v-if="form.taxflg == 'Y'">
              <c-input v-model="form.taxacc" autocomplete="off" placeholder="请选择税则账号"></c-input>
            </el-form-item>
          </c-col>
        </c-col>


        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
              <c-input type="textarea" :autosize="{minRows:4}" v-model="form.remark" autocomplete="off" placeholder=""></c-input>
            </el-form-item>
          </c-col>
          
        </c-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitAdd" v-if="feetyp == 'add'">提 交</el-button>
        <el-button type="primary" @click="commitEdit" v-if="feetyp == 'edit'">提 交</el-button>
        <el-button @click="dialogAdd = false" v-if="feetyp != 'info'">取 消</el-button>
        <el-button @click="dialogAdd = false" v-if="feetyp == 'info'">返 回</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import codes from "~/config/CodeTable";

  import Utils from "~/utils";
  import {
    queryByPage,
    add,
    edit,
    deleteById,
    queryCod,
    queryById
  } from "~/service/manage/fee.js";
  import {
    getFeeCodList
  } from "~/service/manage/fec.js";
  import Fee, {
    Pattern
  } from "./Fee.js";
  import commonFunctions from "~/mixin/commonFunctions.js";

  export default {
    mixins: [commonFunctions],
    name: "",
    props: ["model"],
    inject: [],
    data() {
      return {
        rules: Pattern,
        feeData: [],
        feeColumns: [{
            label: '费用代码',
            prop: 'coddsc',
            width: '200'
          },
          {
            label: '默认付费角色',
            prop: 'rol',
            width: 'auto'
          },
          {
            label: '费用账号',
            prop: 'acc',
            width: 'auto'
          },
          {
            label: '价税分离标志',
            prop: 'taxflg',
            width: 'auto'
          },
          {
            label: '税则账号',
            prop: 'taxacc',
            width: 'auto'
          }
        ],
        dialogNam: {
          'add': '费用代码信息新增',
          'edit': '费用代码信息编辑',
          'info': '费用代码信息查看',
        },
        isDisabled: false,
        isShowAddBtn: false,
        isShowUpdBtn: false,
        isShowDelBtn: false,
        searchLoading: false,
        feeCodList: [],
        dialogAdd: false,
        form: new Fee().data,
        feetyp: "",
        formLabelWidth: "160px",
      };
    },
    computed: {
      isTaxDisabled() {
        return this.form.taxflg === "X";
      },
    },
    activated() {
      const {
        update
      } = this.$route.params
      if (update) {
        this.onInffeeSearch()
      }
    },
    created() {
      this.onInffeeSearch();
      this.getCodList()
    },
    mounted() {
      this.getHiddenButtonVue();
    },
    methods: {
      getHiddenButtonVue() {
        const loading = this.loading();
        this.$buttonControlService.hiddenBtnList()
          .then((res) => {
            // 【新增】按钮
            let hasInsert = res.some((item) => {
              return item.ITEMID === 'feeInsertBtn';
            })
            if (hasInsert) {
              this.isShowAddBtn = false;
            } else {
              this.isShowAddBtn = true;
            }
            // 【修改】按钮
            let hasUpdate = res.some((item) => {
              return item.ITEMID === 'feeUpdateBtn';
            })
            if (hasUpdate) {
              this.isShowUpdBtn = false;
            } else {
              this.isShowUpdBtn = true;
            }
            // 【删除】按钮
            let hasDelete = res.some((item) => {
              return item.ITEMID === 'feeDeleteBtn';
            })
            if (hasDelete) {
              this.isShowDelBtn = false;
            } else {
              this.isShowDelBtn = true;
            }
            loading.close();
          })
      },
      getCodList() {
        getFeeCodList({}).then(res => {
          if (res.respCode == SUCCESS) {
            const list = res.data.list
            this.feeCodList = list
          }
        })
      },
      handleReset() {
        this.model.cod = "";
      },
      onSearch() {
        this.model.pageNum = 1;
        this.model.pageSize = PageSize;
        this.onInffeeSearch();
      },
      onInffeeSearch() {
        this.searchLoading = true;
        delete this.model.isModify;
        delete this.model.modifySet;
        queryByPage(this.model).then(res => {
          if (res.respCode == SUCCESS) {
            const list = res.data.list
            this.feeData = list
            this.model.pageNum = res.data.pageNumber
            this.model.pageSize = res.data.pageSize
            this.model.total = res.data.total
            this.searchLoading = false;
          } else {
            this.searchLoading = false;
            this.$notify.error("查询失败");
          }
        })
      },
      queryFunc(pageNumber, pageSize) {
        this.model.pageNum = pageNumber
        this.model.pageSize = pageSize
        this.onInffeeSearch()
      },
      getCodesByKey(key) {
        return codes[key] || [];
      },
      feeAdd() {
        this.dialogAdd = true;
        this.feetyp = "add";
        this.isDisabled = false;
        this.form = new Fee().data;
      },
      feeDisplay(row) {
        this.dialogAdd = true;
        this.feetyp = "info";
        this.isDisabled = true;
        queryById(row).then((res) => {
          if (res.respCode == SUCCESS) {
            this.form = res.data;
          } else {
            this.$notify.error("客户不存在")
          }
        });
      },
      feeEdit(row) {
        this.dialogAdd = true;
        this.isDisabled = false;
        this.feetyp = "edit";
        queryById(row).then((res) => {
          if (res.respCode == SUCCESS) {
            this.form = res.data;
          } else {
            this.$notify.error("客户不存在")
          }
        });
      },
      feeDelete(row) {
        this.$confirm("是否确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            deleteById(row)
              .then((res) => {
                this.$notify.success("删除成功！");
                this.getCodList();
                this.onInffeeSearch();
              })
              .catch((err) => {
                this.$notify.error("删除失败！");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      clearTaxAcc() {
        if (this.form.taxflg === "X") {
          this.form.taxacc = "";
        }
      },
      commitAdd() {
        this.$refs.modelForm.validate((validated) => {
          if (validated) {
            delete this.form.isModify;
            delete this.form.modifySet;
            queryCod(this.form)
              .then((res) => {
                if (!res.data) {
                  this.$notify.error("费用代码已存在!");
                } else {
                  add(this.form)
                    .then((res) => {
                      if (res.respCode == SUCCESS) {
                        this.$notify.success("添加成功！");
                        this.getCodList();
                        this.dialogAdd = false;
                        this.onInffeeSearch();
                      } else {
                        this.$notify.error("添加失败！");
                      }
                    })
                    .catch((err) => {
                      this.$notify.error("添加失败！");
                    });
                }
              })
          } else {
            Utils.formValidateTips(this.$refs.modelForm.fields)
          }
        });
      },
      commitEdit() {
        this.$refs.modelForm.validate((validated) => {
          if (validated) {
            delete this.form.isModify;
            delete this.form.modifySet;
            edit(this.form)
              .then((res) => {
                if (res.respCode == SUCCESS) {
                  this.$notify.success("修改成功！");
                  this.getCodList();
                  this.dialogAdd = false;
                  this.onInffeeSearch();
                } else {
                  this.$notify.error("修改失败！");
                }
              })
              .catch((err) => {
                this.$notify.error("修改失败！");
              });
          } else {
            Utils.formValidateTips(this.$refs.modelForm.fields)
          }
        });
      },
      queryCodOnly() {
        delete this.form.isModify;
        delete this.form.modifySet;
        queryCod(this.form)
          .then((res) => {
            if (res.respCode == SUCCESS && !res.data) {
              this.$notify.error("费用代码已存在!");
            }
          })
      },
    },
  };
</script>

<style scoped>
  .table-button-item-list {
    padding: 0;
    margin: 0;
  }

  .table-button-item-list li {
    list-style: none;
    padding: 5px 0;
    text-align: center;
    color: #606266;
    cursor: pointer;
  }
</style>