<template> <div class="eibs-tab"> <c-col :span="24"> <span style="float: left"> <el-button type="primary" size="small" @click="ofcAdd" v-if="isShowInsBtn" ref="gffInsertBtn" :disabled="isDisabled">新增</el-button> <el-button type="primary" size="small" @click="ofcEdit" v-if="isShowUpdBtn" ref="gffUpdateBtn" :disabled="!isDisabled">修改</el-button> </span> <span style="float: right"> <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="onSearch()">查询 </el-button> </span> </c-col> <br /> <el-divider></el-divider> <span>人工数据:</span> <el-divider></el-divider> <c-col :span="12" class="col-left"> <c-col :span="24"> <el-form-item label="通道状态"> <c-select v-model="model.ctlcod" placeholder="" :code="getCodesByKey('gfxsta')" :disabled="true"></c-select> </el-form-item> </c-col> </c-col> <!--===== 右 =====--> <c-col :span="12" class="col-right"> <c-col :span="24"> <el-form-item label="用户"> <c-input v-model="model.usr" placeholder="" :disabled="true"></c-input> </el-form-item> </c-col> </c-col> <c-col :span="12" class="col-left"> <c-col :span="24"> <el-form-item label="生效日期"> <el-date-picker type="date" v-model="model.begdat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true"></el-date-picker> </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" :disabled="true"></el-date-picker> </el-form-item> </c-col> </c-col> <span>人工历史数据:</span> <el-divider></el-divider> <c-col :span="24"> <c-paging-table :data="gffData" :columns="gffColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize" :total="model.total" v-on:queryFunc="queryFunc" :border="true" ref="tablelist"> </c-paging-table> </c-col> <br /> <span>中台数据:</span> <el-divider></el-divider> <c-col :span="12" class="col-left"> <c-col :span="24"> <el-form-item label="通道状态"> <c-select v-model="model2.ctlcod" placeholder="" :code="getCodesByKey('gfxsta')" :disabled="true"></c-select> </el-form-item> </c-col> </c-col> <!--===== 右 =====--> <c-col :span="12" class="col-right"> <c-col :span="24"> <el-form-item label="用户"> <c-input v-model="model2.usr" placeholder="" :disabled="true"></c-input> </el-form-item> </c-col> </c-col> <c-col :span="12" class="col-left"> <c-col :span="24"> <el-form-item label="生效日期"> <el-date-picker type="date" v-model="model2.begdat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true"></el-date-picker> </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="model2.enddat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true"></el-date-picker> </el-form-item> </c-col> </c-col> <span>中台历史数据:</span> <el-divider></el-divider> <c-col :span="24"> <c-paging-table :data="gffData2" :columns="gffColumns2" :pageNumber="model2.pageNum" :pageSize="model2.pageSize" :total="model2.total" v-on:queryFunc="queryFunc2" :border="true" ref="tablelist"> </c-paging-table> </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"> <c-col :span="24"> <c-col :span="12"> <el-form-item label="数据来源" :label-width="formLabelWidth"> <c-select v-model="form.ctlflg" autocomplete="off" placeholder="" :code="getCodesByKey('ctlcod')" :disabled="true"></c-select> </el-form-item> </c-col> <c-col :span="12"> <el-form-item label="通道状态" :label-width="formLabelWidth"> <c-select v-model="form.ctlcod" placeholder="" :code="getCodesByKey('gfxsta')"></c-select> </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> <c-col :span="24"> <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> </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 { queryByU, queryByG, queryByPage, queryByPageTwice, add, edit } from "~/service/manage/gimgff.js"; import { getUsr } from "~/service/manage/ofc.js"; import Gimgfx, { Pattern } from "./Gimgfx.js"; import Gimgff from "./Gimgff.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 Gimgff().data, model2: new Gimgff().data, gffData: [], gffColumns: [{ label: '数据来源', prop: 'ctlflg', width: 'auto' }, { label: '通道状态', prop: 'ctlcod', width: 'auto' }, { label: '生效日期', prop: 'begdat', width: 'auto' }, { label: '失效日期', prop: 'enddat', width: 'auto' }, { label: '用户', prop: 'usr', width: 'auto' }, ], gffData2: [], gffColumns2: [{ label: '数据来源', prop: 'ctlflg', 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': '渠道统一应急开关编辑', }, dialogAdd: false, isShowInsBtn: true, isShowUpdBtn: true, searchLoading: false, form: new Gimgfx().data, ofctyp: "", formLabelWidth: "100px", }; }, computed: { isDisabled() { return this.model.inr !== '' && this.model.inr !== null } }, created() { // this.onSearch(); }, methods: { onSearch() { this.model.pageSize = PageSize; this.model.pageNum = 1; this.onGimgffSearch(); this.onSearch2(); }, onSearch2() { this.model2.pageSize = PageSize; this.model2.pageNum = 1; this.onGimgffSearch2(); }, getCodesByKey(key) { return codes[key] || []; }, onGimgffSearch() { const loading = this.loading(); this.queryByIdU(); queryByPage(this.model).then(res => { const list = res.data.list this.gffData = list this.model.pageNum = res.data.pageNumber this.model.pageSize = res.data.pageSize this.model.total = res.data.total loading.close() }).catch((err) => { loading.close() this.$notify.error("查询失败!"); }); }, queryByIdU() { queryByU(this.model).then(res => { this.model = res.data; }) }, queryByIdG() { queryByG(this.model).then(res => { this.model2 = res.data; }) }, queryFunc(pageNumber, pageSize) { this.model.pageNum = pageNumber this.model.pageSize = pageSize this.onGimgffSearch() }, onGimgffSearch2() { const loading = this.loading(); this.searchLoading = true; this.queryByIdG(); queryByPageTwice(this.model2).then(res => { const list = res.data.list this.gffData2 = list this.model2.pageNum = res.data.pageNumber this.model2.pageSize = res.data.pageSize this.model2.total = res.data.total this.searchLoading = false; loading.close() }).catch((err) => { this.searchLoading = false; loading.close() this.$notify.error("查询失败!"); }); }, queryFunc2(pageNumber, pageSize) { this.model2.pageNum = pageNumber this.model2.pageSize = pageSize this.onGimgffSearch2() }, ofcAdd() { this.ofctyp = "add"; this.dialogAdd = true; this.form = new Gimgfx().data; getUsr({}).then(res => { if (res.respCode == SUCCESS) { this.form.usr = res.data; } }) }, ofcEdit() { queryByU(this.model) .then((res) => { this.form = res.data; this.ofctyp = "edit"; this.dialogAdd = "true"; getUsr({}).then(res => { if (res.respCode == SUCCESS) { this.form.usr = res.data; } }) }) .catch((err) => { this.$notify.error("数据查看失败"); }); }, commitAdd() { this.$refs.form.validate((validated) => { if (validated) { add(this.form) .then((res) => { this.$notify.success("新增成功!"); this.dialogAdd = false; this.onGimgffSearch(); }) .catch((err) => { this.$notify.error("新增失败!"); }); } }) }, commitEdit() { this.$refs.form.validate((validated) => { if (validated) { edit(this.form) .then((res) => { if (res.data) { this.$notify.success("保存成功!"); this.dialogAdd = false; this.onGimgffSearch(); } else { 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>