Dblofc.vue

<template>
  <div class="eibs-tab">
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="银行bic码">
            <c-input  v-model="model.biccod"  placeholder="" @change="BicRul"></c-input>
        </el-form-item>
      </c-col>
    </c-col>
 <!--===== 右 =====-->
    <c-col :span="12" class="col-right">
       <c-col :span="24">
        <el-form-item label="报文类型">
            <c-select v-model="model.msgtyp"  placeholder="" dbCode="GSPMSG"></c-select>
        </el-form-item>
       </c-col>
    </c-col>

        <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="通道类型">
            <c-select  v-model="model.ctlcod"  placeholder="" :code="getCodesByKey('gimofc')"></c-select>
        </el-form-item>
      </c-col>
    </c-col>
 <!--===== 右 =====-->
    <c-col :span="12" class="col-right">
       <c-col :span="24">
        <el-form-item label="失效日期">
            <el-date-picker type="date" v-model="model.enddat"  placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
       </c-col>
    </c-col>

    <c-col :span="24">
      <span style="float: left">
        <el-button type="primary" size="small" v-if="isShowInsBtn" ref="gspInsertBtn" @click="ofcAdd">新增</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"
          @click="onSearch()"
          >查询
        </el-button>
      </span>
    </c-col>

   

    <c-col :span="24">
      <c-paging-table :data="ofcData" :columns="ofcColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true" ref="tablelist">
        <c-table-column fixed="right" prop="op" label="操作" width="240px">
          <template slot-scope="{ scope }">
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              ref="gspDisplayBtn"
              @click="ofcDisplay(scope.row)"
              >详情</c-button
            >
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              v-if="isShowUpdBtn"
              ref="gspUpdateBtn"
              @click="ofcEdit(scope.row)"
              >修改</c-button
            >
            <c-button
              size="small"
              style="margin-left: 5px"
              v-if="false"
              ref="gspDeleteBtn"
              @click="ofcDelete(scope.row)"
              >删除</c-button
            >
          </template>
        </c-table-column>
      </c-paging-table>
    </c-col>

     <c-col :span="24">
      <c-col :span="12" style="text-align: left">  
      </c-col>
      <c-col :span="12" style="text-align: right">
        <el-button size="small" @click="exitTable">退出</el-button>
      </c-col>
    </c-col>

    <el-dialog :title="dialogNam[ofctyp]" :visible.sync="dialogAdd" :modal-append-to-body="false">
      <el-form ref="form" :model="form" label-suffix="：" :rules="rules" :disabled="isDisabled">
        <c-col :span="24">
            <c-col :span="12">
              <el-form-item label="银行bic" :label-width="formLabelWidth" prop="biccod">
              <c-input v-model="form.biccod" autocomplete="off" placeholder="请输入银行bic" @change="selOfc" :disabled="ofctyp == 'edit'"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="12">
                <el-form-item label="报文类型" :label-width="formLabelWidth" prop="msgtyp">
                    <c-select v-model="form.msgtyp" placeholder="请选择报文类型" dbCode="GSPMSG" @change="selOfc" :disabled="ofctyp == 'edit'"></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="ctlcod">
                    <c-select  v-model="form.ctlcod"  placeholder="" :code="getCodesByKey('gimofc')" @change="selOfc"></c-select>
                </el-form-item>
            </c-col>
             <c-col :span="12">
              <el-form-item label="用户" :label-width="formLabelWidth">
              <c-input v-model="form.usr" autocomplete="off" placeholder="" :disabled="true"></c-input>
              </el-form-item>
            </c-col>
        </c-col>
        <c-col :span="24">
            <c-col :span="12">
                <el-form-item label="生效日期" :label-width="formLabelWidth">
                    <el-date-picker type="date" v-model="form.begdat"  placeholder="" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true"></el-date-picker>
                </el-form-item>
            </c-col>
            <c-col :span="12">
                <el-form-item label="失效日期" :label-width="formLabelWidth">
                    <el-date-picker type="date" v-model="form.enddat"  placeholder="" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true"></el-date-picker>
                </el-form-item>
            </c-col>
        </c-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitAdd" v-if = "ofctyp == 'add'">提 交</el-button>
        <el-button type="primary" @click="commitEdit" v-if = "ofctyp == 'edit'">提 交</el-button>
        <el-button @click="dialogAdd = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryByPage,selofc,add,edit,queryById,deleteById,selofc2,getUsr } from "~/service/manage/ofc.js";
import Gimofc, { Pattern } from "./Gimofc.js";
import codes from "~/config/CodeTable";
import commonFunctions from '~/mixin/commonFunctions.js';

export default {
  props: ["data"],
  inject: ["root"],
  mixins: [commonFunctions],
  data() {
    return {
      rules:Pattern,
      model: new Gimofc().data,
      ofcData: [],
      ofcColumns: [
        { label: '银行BIC', prop: 'biccod', width: 'auto' },
        { label: '报文类型', prop: 'msgtyp', width: 'auto' },
        { label: '通道类型', prop: 'ctlcod', width: 'auto' },
        { label: '生效日期', prop: 'begdat', width: 'auto' },
        { label: '失效日期', prop: 'enddat', width: 'auto' },
        { label: '用户', prop: 'usr', width: 'auto' },
      ],
      dialogNam: {
        'add': '总行渠道控制信息新增',
        'edit': '总行渠道控制信息编辑',
        'info': '总行渠道控制信息查看',
      },
      dialogAdd: false,
      isDisabled:false,
      isShowUpdBtn:true,
      isShowDelBtn:true,
      isShowInsBtn:true,
      form: new Gimofc().data,
      ofctyp:"",
      formLabelWidth:"100px",
    };
  },
  created() {
    // this.onGimofcSearch();
  },
  methods: {
    handleReset() {
        this.model.biccod = "";
        this.model.msgtyp = "";
        this.model.ctlcod = "";
        this.model.enddat = "2299-12-31 00:00:00";
    },
    onSearch() {
      this.model.pageSize=PageSize;
      this.model.pageNum = 1;
      if (this.model.biccod != "") {
          if(this.model.biccod.length > 0 && this.model.biccod.length < 8) {
            this.$notify.error("行号至少输入8位");
          } else if(this.model.biccod.length > 11) {
            this.$notify.error("行号不得超过11位");
          } else {
            this.onGimofcSearch();
          }
      } else if(this.model.biccod == "") {
        this.onGimofcSearch();
      }
    },
    getCodesByKey(key) {
      return codes[key] || [];
    },
    selOfc() {
      if(this.form.biccod != "" && this.form.msgtyp != "" && this.form.tclcod != "") {
        if(this.ofctyp == "add") {
          selofc2(this.form)
          .then((res) => {
            if(res.respCode == SUCCESS && res.data) {
              this.$notify.error("该组合已存在有效数据");
            }
          })
          .catch((err) => {
            this.$notify.error("数据监测失败");
          });
        } else if(this.ofctyp == "edit") {
           selofc(this.form)
          .then((res) => {
            if(res.respCode == SUCCESS && res.data) {
              this.$notify.error("该组合已存在有效数据");
            }
          })
          .catch((err) => {
            this.$notify.error("数据监测失败");
          });
        }
      }
    },
    BicRul() {
      if (this.model.biccod != "") {
          if(this.model.biccod.length > 0 && this.model.biccod.length < 8) {
            this.$notify.error("行号至少输入8位");
          } else if(this.model.biccod.length > 11) {
            this.$notify.error("行号不得超过11位");
          }
        } 
    },
    onGimofcSearch() {
      const loading = this.loading();
      queryByPage(this.model).then(res => {
        if(res.respCode == SUCCESS) {
        const list = res.data.list
        this.ofcData = list
        this.model.pageNum = res.data.pageNumber
        this.model.pageSize = res.data.pageSize
        this.model.total = res.data.total
        }
      })
      loading.close();
    },
    queryFunc(pageNumber, pageSize) {
      this.model.pageNum = pageNumber
      this.model.pageSize = pageSize
      this.onGimofcSearch()
    },
    ofcAdd() {
      this.ofctyp = "add";
      this.dialogAdd=true;
      this.isDisabled=false;
      this.form = new Gimofc().data;
      getUsr({}).then(res => {
        if(res.respCode == SUCCESS) {
        this.form.usr = res.data;
        }
      })
	},
    ofcDisplay(row) {
      queryById(row)
      .then((res) => {
        if(res.respCode == SUCCESS) {
        this.form = res.data;
        this.ofctyp = "info";
        this.isDisabled=true;
		    this.dialogAdd = true;
        } else {
          this.$notify.error("数据查看失败");
        }
      })
      .catch((err) => {
        this.$notify.error("数据查看失败");
      });
	},
    ofcEdit(row) {
      queryById(row)
      .then((res) => {
        if(res.respCode == SUCCESS) {
        this.form = res.data;
        this.ofctyp = "edit";
        this.isDisabled=false;
		    this.dialogAdd = true;
        } else {
          this.$notify.error("数据查看失败");
        }
      })
      .catch((err) => {
        this.$notify.error("数据查看失败");
      });
	},
    ofcDelete(row) {
			this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteById(row)
            .then((res) => {
              if(res.respCode == SUCCESS) {
              this.$notify.success("删除成功！");
              this.onGimofcSearch();
              } else {
                this.$notify.error("删除失败！");
              }
            })
            .catch((err) => {
              this.$notify.error("删除失败！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
		},
    exitTable() {
      this.$router.go(-1)
      this.$store.commit('delTagsArry', this.$route.path)
    },
    commitAdd() {
      this.$refs.form.validate((validated) => {
		if(validated){
       if(this.form.biccod != "" && this.form.msgtyp != "" && this.form.tclcod != "") {
        selofc2(this.form)
        .then((res) => {
          if(res.respCode == SUCCESS && res.data) {
          this.$notify.error("该组合已存在有效数据");
          } else {
                add(this.form)
                    .then((res) => {
                      if(res.respCode == SUCCESS) {
                        this.$notify.success("新增成功！");
                        this.dialogAdd = false;
                        this.onGimofcSearch();
                      } else {
                        this.$notify.error("新增失败！");
                      }
                    })
                    .catch((err) => {
                      this.$notify.error("新增失败！");
                    });
              }
            })
            .catch((err) => {
              this.$notify.error("数据监测失败");
            });
          }
        }
      })
    },
    commitEdit() {
      this.$refs.form.validate((validated) => {
        if(validated){
              if(this.form.biccod != "" && this.form.msgtyp != "" && this.form.tclcod != "") {
            selofc(this.form)
            .then((res) => {
              if(res.respCode == SUCCESS && res.data) {
              this.$notify.error("该组合已存在有效数据");
              } else {
                  edit(this.form)
                    .then((res) => {
                      if(res.respCode == SUCCESS) {
                      this.$notify.success("保存成功！");
                      this.dialogAdd = false;
                      this.onGimofcSearch();
                      } else {
                        this.$notify.error("保存失败！");
                      }
                    })
                    .catch((err) => {
                      this.$notify.error("保存失败！");
                    });
              }
            })
            .catch((err) => {
              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>