Skip to content

liangzhen / framework-tools-web

Go to a project
Commit e80b46af by liuyong
Options

Merge branch 'master' of http://47.97.176.204:19000/wangwansu/iact_jiagou_drowio

2 parents bcb6e572 aafc39d7
Inline Side-by-side
Showing with 1122 additions and 1234 deletions
src/views/comCenterServeList/index.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
import page1 from "./pages/page1"; import page1 from "./pages/page1";
import page2 from "./pages/page2"; import page2 from "./pages/page2";
import page3 from "./pages/page3"; import page3 from "./pages/page3";
import page4 from "./pages/page3"; import page4 from "./pages/page4";
import { MessageBox, Message } from 'element-ui'; import { MessageBox, Message } from 'element-ui';
import $ from 'jquery'; import $ from 'jquery';
......
src/views/comCenterServeList/pages/page1.vue
...@@ -5,23 +5,23 @@ ...@@ -5,23 +5,23 @@
<div class="search_menu_item_container"> <div class="search_menu_item_container">
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">归属部门</span> <span class="search_title">归属部门</span>
<el-select v-model="params.tcType" placeholder="请选择" class="search_item"> <el-select v-model="params.departId" placeholder="请选择" class="search_item">
<el-option v-for="item in selectData1" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in selectData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">服务来源</span> <span class="search_title">服务来源</span>
<el-select v-model="params.problemType" placeholder="请选择" class="search_item"> <el-select v-model="params.abilitySource" placeholder="请选择" class="search_item">
<el-option v-for="item in selectData2" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in selectData2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">服务名称</span> <span class="search_title">服务名称</span>
<el-input v-model="params.tcName" placeholder="请输入内容" class="search_item"></el-input> <el-input v-model="params.inventoryName" placeholder="请输入内容" class="search_item"></el-input>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">获取方式</span> <span class="search_title">获取方式</span>
<el-input v-model="params.tcName" placeholder="请输入内容" class="search_item"></el-input> <el-input v-model="params.sourceType" placeholder="请输入内容" class="search_item"></el-input>
</div> </div>
</div> </div>
<div class="search_menu_btn_container"> <div class="search_menu_btn_container">
...@@ -36,42 +36,25 @@ ...@@ -36,42 +36,25 @@
</div> </div>
</div> </div>
<div class="search_btn"> <div class="search_btn">
<el-button type="primary" size="medium" icon="el-icon-document-add" @click="operate('add')">启用</el-button> <!-- <el-button type="primary" size="medium" icon="el-icon-document-add" @click="operate('add')">启用</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete" @click="operate('delMultiple')">停用</el-button> <el-button type="primary" size="medium" icon="el-icon-delete" @click="operate('delMultiple')">停用</el-button> -->
<!-- <el-button type="primary" size="medium" icon="el-icon-plus" @click="exportFile">导出</el-button> --> <el-button type="primary" size="medium" icon="el-icon-document-add">启用</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete">停用</el-button>
</div> </div>
<el-table :height="tableHeight" @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" stripe border> <el-table :height="tableHeight" @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" stripe border>
<!-- <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> -->
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column> <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="tcName" label="案例名称" align="center"></el-table-column> <el-table-column prop="inventoryName" label="服务名称" align="center"></el-table-column>
<el-table-column prop="tcType" label="案例类型" align="center"> <el-table-column prop="tcType" label="服务来源" align="center"></el-table-column>
<template slot-scope="scope"> <el-table-column prop="departName" label="归属部门" align="center"></el-table-column>
<span >{{dicObj.tcType[String(scope.row.tcType)]}}</span> <el-table-column prop="compName" label="建设单位" align="center"></el-table-column>
</template> <el-table-column prop="publishTime" label="发布时间" align="center" :show-overflow-tooltip="true"></el-table-column>
</el-table-column> <el-table-column prop="description" label="简介" align="center"></el-table-column>
<el-table-column prop="prjType" label="项目类型" align="center"> <el-table-column prop="inventoryVersion" label="版本" align="center"></el-table-column>
<template slot-scope="scope">
<span >{{dicObj.prjType[String(scope.row.prjType)]}}</span>
</template>
</el-table-column>
<el-table-column prop="buildContent" label="建设内容" align="center"></el-table-column>
<el-table-column prop="archiDetail" label="架构详情" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="problemType" label="问题类型" align="center">
<template slot-scope="scope">
<span >{{dicObj.problemType[String(scope.row.problemType)]}}</span>
</template>
</el-table-column>
<el-table-column prop="problemLevel" label="问题等级" align="center">
<template slot-scope="scope">
<span >{{dicObj.problemLevel[String(scope.row.problemLevel)]}}</span>
</template>
</el-table-column>
<el-table-column prop="problemContent" label="问题描述" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="操作" width="150" align="center"> <el-table-column label="操作" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;"> <div style="display: flex;align-items: center;justify-content: center;">
<el-button icon="el-icon-view" type="primary" size="mini" @click="operate('edit',scope.row)">查看</el-button> <el-button icon="el-icon-view" type="primary" size="mini" @click="operate('view',scope.row)">查看</el-button>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -156,7 +139,7 @@ import { MessageBox, Message } from 'element-ui'; ...@@ -156,7 +139,7 @@ import { MessageBox, Message } from 'element-ui';
import $ from 'jquery'; import $ from 'jquery';
export default { export default {
name: 'TypicalExampleManage', name: 'comCenterServePage1',
components: { components: {
}, },
...@@ -168,59 +151,20 @@ export default { ...@@ -168,59 +151,20 @@ export default {
loading: false, loading: false,
selectList: [], selectList: [],
selectData1: [ selectData1: [
{
label: "移动应用典型案例",
value: 1,
},
{
label: "数据模型典型案例",
value: 2,
},
{
label: "数据中台典型案例",
value: 3,
},
], ],
selectData2: [ selectData2: [
{
label: "一致性",
value: 1,
},
{
label: "架构遵从",
value: 2,
},
{
label: "重复风险",
value: 3,
},
], ],
selectData3: [ selectData3: [
{
label: "暂时未例举",
value: 1,
},
], ],
selectData4: [ selectData4: [
{
label: "一级",
value: 1,
},
{
label: "二级",
value: 2,
},
{
label: "三级",
value: 3,
},
], ],
params: { params: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
tcName: "", departId: "",
tcType: "", abilitySource: "",
problemType: "", inventoryName: "",
sourceType: "",
// 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力 // 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力
abilityType: "1", abilityType: "1",
}, },
...@@ -243,9 +187,6 @@ export default { ...@@ -243,9 +187,6 @@ export default {
tableHeight: null, tableHeight: null,
dicObj: { dicObj: {
tcType: { tcType: {
// 1: "在库",
// 2: "出库",
// 3: "出库",
}, },
prjType: {}, prjType: {},
problemType: {}, problemType: {},
...@@ -259,27 +200,14 @@ export default { ...@@ -259,27 +200,14 @@ export default {
}) })
this.set_table_height(); this.set_table_height();
this.selectData1.forEach(item => {
this.dicObj.tcType[item.value] = item.label;
});
this.selectData2.forEach(item => {
this.dicObj.problemType[item.value] = item.label;
});
this.selectData3.forEach(item => {
this.dicObj.prjType[item.value] = item.label;
});
this.selectData4.forEach(item => {
this.dicObj.problemLevel[item.value] = item.label;
});
// 初始化查询列表 // 初始化查询列表
this.getList(); this.getList();
// 获取元素列表 // 获取元素列表
this.get_an_li_lei_xing_select(); // this.get_an_li_lei_xing_select();
this.get_wen_ti_lei_xing_select(); // this.get_wen_ti_lei_xing_select();
this.get_xiang_mu_lei_xing_select(); // this.get_xiang_mu_lei_xing_select();
this.get_wen_ti_deng_ji_select(); // this.get_wen_ti_deng_ji_select();
}, },
methods: { methods: {
...@@ -297,9 +225,12 @@ export default { ...@@ -297,9 +225,12 @@ export default {
this.params = { this.params = {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
tcName: "", departId: "",
tcType: "", abilitySource: "",
problemType: "", inventoryName: "",
sourceType: "",
// 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力
abilityType: "1",
} }
}, },
// 所有操作 // 所有操作
...@@ -343,53 +274,6 @@ export default { ...@@ -343,53 +274,6 @@ export default {
} }
}); });
} }
}else if (type == "del") {
// 删除
this.$confirm("确认删除吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
let params = {
ids: [item.ktcId],
};
getTypicalExampleDel(params).then(res => {
if (res.code == 200) {
this.$message.success("删除成功");
this.getList();
}else{
this.$message.error(res.msg);
}
});
}).catch(() => {
});
}else if (type == "delMultiple") {
if (this.selectList.length <= 0) {
this.$message.error("请选择一项进行删除");
return;
}
let params = {
ids: [],
};
this.selectList.map(item => {
params.ids.push(item.ktcId)
})
this.$confirm("确认批量删除吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
getTypicalExampleDel(params).then(res => {
if (res.code == 200) {
this.$message.success("批量删除成功");
this.getList();
}else{
this.$message.error(res.msg);
}
});
}).catch(() => {
});
} }
}, },
// 新建清空表单 // 新建清空表单
...@@ -405,16 +289,6 @@ export default { ...@@ -405,16 +289,6 @@ export default {
archiDetail: "", archiDetail: "",
} }
}, },
exportFile() {//导出
getTypicalExampleExcel(this.params).then(res => {
let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
let url = URL.createObjectURL(blob);
let link = document.createElement('a');
link.href = url;
document.body.appendChild(link);
link.click();
})
},
get_an_li_lei_xing_select() {//案例类型下拉 get_an_li_lei_xing_select() {//案例类型下拉
const params = { const params = {
...@@ -461,7 +335,7 @@ export default { ...@@ -461,7 +335,7 @@ export default {
const table_container_height = $(".table_container").height(); const table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height(); const search_menu_height = $(".search_menu").height();
const search_btn_height = $(".search_btn").outerHeight(true); const search_btn_height = $(".search_btn").outerHeight(true);
this.tableHeight = table_container_height - search_menu_height - search_btn_height - 90 + 'px'; this.tableHeight = table_container_height - search_menu_height - search_btn_height - 140 + 'px';
}, },
selectable(row) {//表格勾选框禁用 selectable(row) {//表格勾选框禁用
if(row.state == 1) { if(row.state == 1) {
......
src/views/comCenterServeList/pages/page2.vue
<template> <template>
<div class="JiaGouYuanShuGuanLi"> <div class="typicalExampleManage">
<div class="table_container"> <div class="table_container">
<div class="search_menu"> <div class="search_menu">
<div class="search_menu_item_container"> <div class="search_menu_item_container">
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">元素关系名称</span> <span class="search_title">归属部门</span>
<el-input v-model="params.rsName" placeholder="请输入内容" class="search_item"></el-input> <el-select v-model="params.departId" placeholder="请选择" class="search_item">
<el-option v-for="item in selectData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">适用范围</span> <span class="search_title">服务来源</span>
<el-select v-model="params.scope" placeholder="请选择" clearable class="search_item"> <el-select v-model="params.abilitySource" placeholder="请选择" class="search_item">
<el-option v-for="(item,idnex) in search_select1" :key="idnex" :label="item.name" :value="item.belongId" ></el-option> <el-option v-for="item in selectData2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">状态</span> <span class="search_title">服务名称</span>
<el-select v-model="params.state" placeholder="请选择" clearable class="search_item"> <el-input v-model="params.inventoryName" placeholder="请输入内容" class="search_item"></el-input>
<el-option v-for="(item,idnex) in stateList" :key="idnex" :label="item.label" :value="item.value" ></el-option> </div>
</el-select> <div class="search_menu_item">
<span class="search_title">获取方式</span>
<el-input v-model="params.sourceType" placeholder="请输入内容" class="search_item"></el-input>
</div> </div>
</div> </div>
<div class="search_menu_btn_container"> <div class="search_menu_btn_container">
...@@ -32,31 +36,25 @@ ...@@ -32,31 +36,25 @@
</div> </div>
</div> </div>
<div class="search_btn"> <div class="search_btn">
<!-- <el-button type="primary" size="medium" icon="el-icon-document-add" @click="operate('add')">启用</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete" @click="operate('delMultiple')">停用</el-button> -->
<el-button type="primary" size="medium" icon="el-icon-document-add">启用</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete">停用</el-button>
</div> </div>
<el-table :data="tableData" stripe border height="450"> <el-table :height="tableHeight" @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" stripe border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column> <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="rsName" label="元素关系名称" align="center"></el-table-column> <el-table-column prop="inventoryName" label="服务名称" align="center"></el-table-column>
<el-table-column prop="content" label="关系描述" align="center"></el-table-column> <el-table-column prop="tcType" label="服务来源" align="center"></el-table-column>
<!-- <el-table-column label="图标" align="center" width="100"> <el-table-column prop="departName" label="归属部门" align="center"></el-table-column>
<template slot-scope="scope"> <el-table-column prop="compName" label="建设单位" align="center"></el-table-column>
<div class="tableIcon"> <el-table-column prop="publishTime" label="发布时间" align="center" :show-overflow-tooltip="true"></el-table-column>
<img class="iconItem" :src="scope.row.icon" alt=""> <el-table-column prop="description" label="简介" align="center"></el-table-column>
</div> <el-table-column prop="inventoryVersion" label="版本" align="center"></el-table-column>
</template> <el-table-column label="操作" width="150" align="center">
</el-table-column> -->
<el-table-column prop="version" label="字典版本号" width="250" align="center"></el-table-column>
<el-table-column prop="state" label="字典版本状态" width="150" align="center">
<template slot-scope="scope">
<span >{{dicObj.state[scope.row.state]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="400" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;"> <div style="display: flex;align-items: center;justify-content: center;">
<el-button :class="scope.row.state == 1 ? '':'editBtn'" icon="el-icon-edit" size="mini" @click="operate('edit',scope.row)" :disabled="scope.row.state == 1">编辑</el-button> <el-button icon="el-icon-view" type="primary" size="mini" @click="operate('view',scope.row)">查看</el-button>
<el-button :class="scope.row.state == 1 ? '':'editBtn'" icon="el-icon-upload2" size="mini" @click="operate('pushEdit',scope.row)" :disabled="scope.row.state == 1">发布</el-button>
<el-button :class="scope.row.state != 1 ? '':'stopBtn'" icon="el-icon-remove-outline" size="mini" @click="operate('stop',scope.row)" :disabled="scope.row.state != 1">停用</el-button>
<!-- <el-button icon="el-icon-delete" size="mini" @click="operate('del',scope.row)" :disabled="scope.row.state != 2">删除</el-button> -->
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -65,346 +63,195 @@ ...@@ -65,346 +63,195 @@
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="page.current" :current-page="pager.current"
:page-sizes="page.sizes" :page-sizes="pager.sizes"
:page-size="page.size" :page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="page.total"> :total="pager.total">
</el-pagination> </el-pagination>
</div> </div>
<!-- 第一个弹窗 -->
<el-dialog <el-dialog
:title="title" :title="title"
:visible.sync="add_dialog" :visible.sync="add_dialog"
:center="false" :center="false"
width="60%"> width="60%">
<div class="add_dialog_content"> <div class="add_dialog_content">
<div class="dialog_content_1">
<div class="dialog_form_item">
<div class="dialog_form_item_title">元素关系名称</div>
<el-input placeholder="" class="dialog_form_item_content" v-model="formData.rsName" :disabled="true"></el-input>
</div>
<div class="dialog_form_item">
<div class="dialog_form_item_title">适用范围</div>
<el-select v-model="formData.scope" placeholder="请选择" :disabled="true" class="search_item">
<el-option v-for="(item,idnex) in search_select1" :key="idnex" :label="item.name" :value="item.belongId" ></el-option>
</el-select>
</div>
<div class="dialog_form_item">
<div class="dialog_form_item_title">状态</div>
<el-select v-model="formData.state" placeholder="" :disabled="true" class="search_item">
<el-option v-for="(item,idnex) in stateList" :key="idnex" :label="item.label" :value="item.value" ></el-option>
</el-select>
</div>
</div>
<el-table :data="tableData2" stripe border height="350" @cell-dblclick="tableDbclick">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="fieldName" label="字段名" align="center">
<!-- <template slot-scope="scope">
<div v-show=" !columnIsShow|| (editIndex!= scope.row.index)">{{scope.row.fieldName}}</div>
<el-input v-show="columnIsShow&& (editIndex== scope.row.index)" @blur="columnIsShow = false" v-model="scope.row.fieldName"></el-input>
</template> -->
</el-table-column>
<el-table-column prop="cnName" label="中文名" align="center">
<!-- <template slot-scope="scope">
<div v-show=" !columnIsShow|| (editIndex!= scope.row.index)">{{scope.row.cnName}}</div>
<el-input v-show="columnIsShow&& (editIndex== scope.row.index)" @blur="columnIsShow = false" v-model="scope.row.cnName"></el-input>
</template> -->
</el-table-column>
<el-table-column prop="displayOrder" label="排序" align="center">
<!-- <template slot-scope="scope">
<div v-show=" !columnIsShow|| (editIndex!= scope.row.index)">{{scope.row.displayOrder}}</div>
<el-input v-show="columnIsShow&& (editIndex== scope.row.index)" @blur="columnIsShow = false" v-model="scope.row.displayOrder"></el-input>
</template> -->
</el-table-column>
<el-table-column prop="contentLength" label="长度" align="center">
<!-- <template slot-scope="scope">
<div v-show=" !columnIsShow|| (editIndex!= scope.row.index)">{{scope.row.contentLength}}</div>
<el-input v-show="columnIsShow&& (editIndex== scope.row.index)" @blur="columnIsShow = false" v-model="scope.row.contentLength"></el-input>
</template> -->
</el-table-column>
<el-table-column prop="controlType" label="控件" align="center">
<!-- <template slot-scope="scope">
<div v-show=" !columnIsShow|| (editIndex!= scope.row.index)">{{dicObj.controlType[scope.row.controlType]}}</div>
<el-select v-show="columnIsShow&& (editIndex== scope.row.index)" v-model="scope.row.controlType">
<el-option
v-for="(item, index) in selectTypeList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template> -->
<template slot-scope="scope">
<span>{{dicObj.controlType[scope.row.controlType]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;">
<el-button icon="el-icon-edit" size="mini" @click="operateDia('edit',scope.row)">编辑</el-button>
<el-button icon="el-icon-delete" size="mini" @click="operateDia('del',scope.row,scope.$index)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="newBtn">
<el-button class="addItem" icon="el-icon-plus" circle @click="operateDia('add')"></el-button>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="operate('push')">发布</el-button>
<el-button class="greenButton" @click="operate('create')">保存</el-button>
<el-button @click="add_dialog = false">取消</el-button>
</span>
</el-dialog>
<!-- 第二个弹窗 -->
<el-dialog
:title="title2"
:visible.sync="add_dialog2"
:center="false"
width="40%">
<div class="add_dialog_content"> <div class="add_dialog_content">
<el-form :model="formData2" :rules="rules" ref="page2Form"> <el-form :model="formData" ref="form">
<div class="form_item_container"> <div class="form_item_container">
<el-form-item class="cross" label="字段名:" prop="fieldName"> <el-form-item label="案例名称:" prop="tcName">
<el-input v-model="formData2.fieldName" maxlength="100"></el-input> <el-input v-model="formData.tcName"></el-input>
</el-form-item> </el-form-item>
<el-form-item class="cross" label="中文名:" prop="cnName"> <el-form-item label="案例类型:" prop="tcType">
<el-input v-model="formData2.cnName" maxlength="100"></el-input> <el-select v-model="formData.tcType" placeholder="请选择">
<el-option v-for="item in selectData1" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item class="cross" label="排序:" prop="displayOrder"> <el-form-item label="项目类型:" prop="prjType">
<el-input v-model="formData2.displayOrder" maxlength="100"></el-input> <el-select v-model="formData.prjType" placeholder="请选择">
<el-option v-for="item in selectData3" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item class="cross" label="长度:" prop="contentLength"> <el-form-item label="建设内容:" prop="buildContent">
<el-input v-model="formData2.contentLength" maxlength="100"></el-input> <el-input v-model="formData.buildContent"></el-input>
</el-form-item> </el-form-item>
<el-form-item class="cross" label="控件:" prop="controlType"> <el-form-item label="问题类型:" prop="problemType">
<el-select v-model="formData2.controlType" placeholder="请选择" clearable> <el-select v-model="formData.problemType" placeholder="请选择">
<el-option v-for="(item,idnex) in selectTypeList" :key="idnex" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in selectData2" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="问题等级:" prop="problemLevel">
<el-select v-model="formData.problemLevel" placeholder="请选择">
<el-option v-for="item in selectData4" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item class="cross1" label="架构详情:" prop="archiDetail">
<el-input type="textarea" v-model="formData.archiDetail" maxlength="200" show-word-limit></el-input>
</el-form-item>
<el-form-item class="cross1" label="问题描述:" prop="problemContent">
<el-input type="textarea" v-model="formData.problemContent" maxlength="200" show-word-limit></el-input>
</el-form-item>
</div> </div>
</el-form> </el-form>
</div> </div>
</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="operateDia('save')">保存</el-button> <el-button class="greenButton" @click="operate('create')">确定</el-button>
<el-button @click="add_dialog2 = false">取消</el-button> <el-button @click="add_dialog = false">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { import {
getYMXZDGLlist, getComCenterServeList,
getYMXZDGLAdd,
getYMXZDGLDel, getDianXingAnLiSelectData,
getYMXZDGLUpdate, getTypicalExampleList,
getYMXZDGLProyList, getTypicalExampleAdd,
getYMXZDGLProyDel, getTypicalExampleUpdate,
getYMXZDGLProyAdd, getTypicalExampleDel,
getYMXZDGLProyUpdate, getTypicalExampleExcel,
query_jia_gou_gui_shu, } from '@/api/index.js';
} from "@/api/index.js"; import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default { export default {
name: 'page2', name: 'comCenterServePage2',
components: { components: {
}, },
data() { data() {
return { return {
tableData: [], tableData: [],
tableData2: [
{
fieldName: "",
cnName: "",
displayOrder: "",
controlType: "",
contentLength: "",
}
],
selectList: [],
add_dialog: false, add_dialog: false,
title: "", title: "",
add_dialog2: false, loading: false,
title2: "", selectList: [],
openType: "", selectData1: [
add_dialog: false,
query_item1: null,
query_item3: null,
query_item4: null,
let1: '',
let2: '',
let3: '',
let4: '',
formData: {
rsName: "",
content: "",
},
formData2: {
fieldName: "",
cnName: "",
displayOrder: "",
contentLength: "",
controlType: "",
},
rules: {
fieldName: [
{ required: true, message: '请输入字段名', trigger: 'blur' },
],
cnName: [
{ required: true, message: '请输入中文名', trigger: 'blur' },
], ],
displayOrder: [ selectData2: [
{ required: true, message: '请输字段入排序', trigger: 'blur' },
], ],
contentLength: [ selectData3: [
{ required: true, message: '请输入字段长度', trigger: 'blur' },
], ],
controlType: [ selectData4: [
{ required: true, message: '请选择控件类型', trigger: 'change' },
], ],
},
params: { params: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
rsName: "", departId: "",
// scope: "", abilitySource: "",
state: "", inventoryName: "",
type: 2, sourceType: "",
// 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力
abilityType: "2",
}, },
page: { pager: {
current: 1, current: 1,
sizes: [10, 20, 50, 100, 200], sizes: [10, 20, 50, 100, 200],
size: 10, size: 10,
total: 0, //总条数 total: 0, //总条数
}, },
dicObj: { formData: {
state: { tcName: '',
0: "已停用", tcType: '',
1: "已发布", prjType: '',
2: "暂存", buildContent: '',
}, problemType: '',
controlType: { problemLevel: '',
0: "单行文本框", problemContent: '',
1: "多行文本框", archiDetail: "",
2: "下拉框",
}
},
stateList: [
{
label: "已发布",
value: 1,
},
{
label: "已停用",
value: 0,
},
{
label: "暂存",
value: 2,
},
],
selectTypeList: [
{
label: "单行文本框",
value: 0,
}, },
{ tableHeight: null,
label: "多行文本框", dicObj: {
value: 1, tcType: {
}, },
{ prjType: {},
label: "下拉框", problemType: {},
value: 2, problemLevel: {},
}, },
],
columnIsShow: false,
editIndex: -1, // 当前编辑行
search_select1: [
{
name: "架构之间",
belongId: 0,
}
],
}; };
}, },
mounted() { mounted(){
// 适用范围下拉 window.addEventListener('resize', () => {
this.get_dialog_select2().then(res => { this.set_table_height();
this.search_select1 = this.search_select1.concat(res); })
}); this.set_table_height();
// 初始化查询列表 // 初始化查询列表
this.getList(); this.getList();
},
created() { // 获取元素列表
// this.get_an_li_lei_xing_select();
// this.get_wen_ti_lei_xing_select();
// this.get_xiang_mu_lei_xing_select();
// this.get_wen_ti_deng_ji_select();
}, },
methods: { methods: {
// 查询架构归属下拉框值
get_dialog_select2() {
return new Promise((resolve, reject) => {
query_jia_gou_gui_shu({}).then(res => {
if(res.code == 200) {
resolve(res.data);
}else {
reject(res.msg);
}
});
})
},
// 查询列表 // 查询列表
getList() { getList() {
getYMXZDGLlist(this.params).then(res => { getComCenterServeList(this.params).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.page.total = res.data.total; this.pager.total = res.data.total;
this.tableData = res.data.records; this.tableData = res.data.records;
} }
}); });
}, },
// 重置 // 重置
reset(){ reset() {
this.params = { this.params = {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
rsName: "", departId: "",
// scope: "", abilitySource: "",
state: "", inventoryName: "",
type: 2, sourceType: "",
// 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力
abilityType: "1",
} }
}, },
// 分页事件
handleSizeChange(val) {
this.page.current = 1;
this.params.current = 1;
this.page.size = val;
this.params.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.page.current = val;
this.params.current = val;
this.getList();
},
// 所有操作 // 所有操作
operate(type,item){ operate(type,item){
this.openType = type; this.openType = type;
if (type == "edit") { if (type == "add") {
this.add_dialog = true; this.add_dialog = true;
this.title = "编辑字典"; this.title = "新建案例";
this.resetForm();
}else if (type == "edit") {
this.add_dialog = true;
this.title = "编辑案例";
this.formData = item; this.formData = item;
this.formData.scope = Number(this.formData.scope); this.formData.tcType = String(this.formData.tcType);
this.getProyList(item); this.formData.problemType = String(this.formData.problemType);
this.formData.prjType = String(this.formData.prjType);
this.formData.problemLevel = String(this.formData.problemLevel);
}else if (type == "create") { }else if (type == "create") {
this.formData.state = 2; if (this.formData.ktcId) {
if (this.formData.dicyId) {
// 编辑保存 // 编辑保存
getYMXZDGLUpdate(this.formData).then(res => { getTypicalExampleUpdate(this.formData).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.$message.success("保存成功"); this.$message.success("保存成功");
this.add_dialog = false; this.add_dialog = false;
...@@ -414,33 +261,11 @@ export default { ...@@ -414,33 +261,11 @@ export default {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
}); });
}
}else if (type == "push") {
if (this.formData.dicyId) {
// 编辑发布
this.formData.state = 1;
getYMXZDGLUpdate(this.formData).then(res => {
if (res.code == 200) {
this.$message.success("发布成功");
this.add_dialog = false;
this.getList();
}else{ }else{
this.add_dialog = false; // 新建保存
this.$message.error(res.msg); getTypicalExampleAdd(this.formData).then(res => {
}
});
}
}else if (type == "pushEdit") {
this.$confirm("确认发布吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.formData = item;
this.formData.state = 1;
getYMXZDGLUpdate(this.formData).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.$message.success("发布成功"); this.$message.success("保存成功");
this.add_dialog = false; this.add_dialog = false;
this.getList(); this.getList();
}else{ }else{
...@@ -448,189 +273,123 @@ export default { ...@@ -448,189 +273,123 @@ export default {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
}); });
}).catch(() => {
});
}else if (type == "stop") {
// 停用
this.$confirm("确认停用吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.formData = item;
this.formData.state = 0;
getYMXZDGLUpdate(this.formData).then(res => {
if (res.code == 200) {
this.$message.success("停用成功");
this.getList();
}else{
this.$message.error(res.msg);
} }
});
}).catch(() => {
});
}else if (type == "del") {
// 删除
// this.formData = item;
// this.$confirm("确认删除吗", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning"
// }).then(() => {
// getYMXZDGLDel(this.formData).then(res => {
// if (res.code == 200) {
// this.$message.success("删除成功");
// this.getList();
// }
// });
// });
} }
}, },
// 新建清空表单 // 新建清空表单
resetForm(){ resetForm(){
this.formData = { this.formData = {
rsName: "", tcName: '',
content: "", tcType: '',
prjType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: "",
} }
}, },
resetFormData2(){
this.formData2 = {
fieldName: "",
cnName: "",
displayOrder: "",
contentLength: "",
controlType: "",
};
},
// 表格多选 get_an_li_lei_xing_select() {//案例类型下拉
handleSelectionChange(e) { const params = {
this.selectList = e; key: "kl_case_type"
},
selectInit(row,index){
if(row.state != "1"){
return true //可勾选
}else{
return false //不可勾选
}
},
// 对话表格操作
operateDia( type, scopeRow, index){
switch (type) {
// 添加
case 'add':
this.add_dialog2 = true;
this.title2 = "新建字典属性";
this.resetFormData2();
this.$nextTick(() => {
this.$refs.page2Form.resetFields();
});
break;
// 编辑
case 'edit':
this.add_dialog2 = true;
this.title2 = "编辑字典属性";
this.formData2 = scopeRow;
break;
// 保存
case 'save':
this.$refs.page2Form.validate(valid => {
if(valid) {
if (this.formData2.propertyId) {
let params = {
fieldName: this.formData2.fieldName,
cnName: this.formData2.cnName,
displayOrder: this.formData2.displayOrder,
contentLength: this.formData2.contentLength,
controlType: this.formData2.controlType,
propertyId: this.formData2.propertyId,
type: this.formData.type,
typeId: this.formData.typeId,
version: this.formData.version,
dicyId: this.formData.dicyId,
state: this.formData.state,
} }
// 编辑保存 getDianXingAnLiSelectData(params).then(res => {
getYMXZDGLProyUpdate(params).then(res => { if(res.code == 200) {
if (res.code == 200) { this.selectData1 = res.data;
this.$message.success("保存成功");
this.add_dialog2 = false;
this.getProyList(this.formData);
}else{
this.add_dialog2 = false;
this.$message.error(res.msg);
} }
}); })
}else{ },
let params = { get_wen_ti_lei_xing_select() {//问题类型下拉
fieldName: this.formData2.fieldName, const params = {
cnName: this.formData2.cnName, key: "kl_question_type"
displayOrder: this.formData2.displayOrder,
contentLength: this.formData2.contentLength,
controlType: this.formData2.controlType,
type: this.formData.type,
typeId: this.formData.typeId,
version: this.formData.version,
dicyId: this.formData.dicyId,
state: this.formData.state,
} }
// 新建保存 getDianXingAnLiSelectData(params).then(res => {
getYMXZDGLProyAdd(params).then(res => { if(res.code == 200) {
if (res.code == 200) { this.selectData2 = res.data;
this.$message.success("新建成功");
this.add_dialog2 = false;
this.getProyList(this.formData);
}else{
this.add_dialog2 = false;
this.$message.error(res.msg);
} }
}); })
},
get_xiang_mu_lei_xing_select() {//项目类型下拉
const params = {
key: "kl_project_type"
} }
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
this.selectData3 = res.data;
} }
}); })
break; },
// 删除 get_wen_ti_deng_ji_select() {//问题等级下拉
case 'del': const params = {
this.$confirm("确认删除吗", "提示", { key: "kl_question_level"
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
getYMXZDGLProyDel(scopeRow).then(res => {
if (res.code == 200) {
this.$message.success("删除成功");
this.getProyList(this.formData);
}else{
this.$message.error(res.msg);
} }
}); getDianXingAnLiSelectData(params).then(res => {
}).catch(() => { if(res.code == 200) {
}); this.selectData4 = res.data;
break;
} }
})
}, },
tableDbclick( row, column, cell, e){
// this.editIndex = row.index; set_table_height() {//动态设置表格高度
// this.columnIsShow = true; const table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height();
const search_btn_height = $(".search_btn").outerHeight(true);
this.tableHeight = table_container_height - search_menu_height - search_btn_height - 140 + 'px';
}, },
// 获取字典属性接口 selectable(row) {//表格勾选框禁用
getProyList(item) { if(row.state == 1) {
let params = { return false; // 禁用
type: item.type, } else {
typeId: item.typeId, return true; //不禁用
} }
getYMXZDGLProyList(params).then(res => {
if (res.code == 200) {
this.tableData2 = res.data;
}
});
}, },
// 表格多选
handleSelectionChange(e) {
this.selectList = e;
}, },
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.params.current = 1;
this.pager.size = val;
this.params.pageSize = val;
this.getList();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.params.current = val;
this.getList();
},
}
} }
</script> </script>
<style lang="scss" scoped> <style>
.JiaGouYuanShuGuanLi{ .confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.form_item_container{
display: flex;
flex-wrap: wrap;
}
.el-form-item{
display: flex;
width: 33%;
}
.cross1{
width: 100%;
}
/deep/ .cross1 > .el-form-item__content{
width: 86.4% !important;
}
.typicalExampleManage{
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
...@@ -638,48 +397,34 @@ export default { ...@@ -638,48 +397,34 @@ export default {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.newBtn{
margin-top: 5px;
.addItem{
background-color: #0D867F;
color: #fff;
}
}
.dialog_content_1{ .dialog_content_1{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.dialog_form_item_title{
width: 90px;
}
.el-input{
width: 260px;
}
.el-select{
width: 260px;
} }
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
} }
.add_dialog_content{ .add_select_item_icon_container{
width: 100%; margin-top: 10px;
.form_item_container{ text-align: center;
display: flex; cursor: pointer;
flex-wrap: wrap;
.cross{
width: 50% !important;
/deep/ .el-form-item__label{
width: 25%;
}
/deep/ .el-form-item__content{
width: 65% !important;
.el-select{
width: 100% !important;
}
} }
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
} }
.el-form-item{ /deep/ .el-input-group__append{
display: flex; background-color: #0D867F;
width: 100%; color: #fff;
cursor: pointer;
} }
/deep/ .el-dialog__title{
color: #fff;
} }
/deep/ .el-dialog__close {
color: #fff;
} }
.search_menu{ .search_menu{
display: flex; display: flex;
...@@ -709,8 +454,23 @@ export default { ...@@ -709,8 +454,23 @@ export default {
.search_btn{ .search_btn{
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: 10px; margin-top: 50px;
margin-bottom: 10px; margin-bottom: 20px;
}
.el-button--default{
border: 0;
}
.shanChu_btn{
color: #DD6A15;
background-color: #F8EBE2;
}
.tingYong_btn{
color: #DEA82A;
background-color: #FDF6E6;
}
.el-button.is-disabled{
color: #C0C4CC !important;
background-color: #fff !important;
} }
.add_btn{ .add_btn{
display: flex; display: flex;
...@@ -762,7 +522,7 @@ export default { ...@@ -762,7 +522,7 @@ export default {
height: 32px; height: 32px;
background: rgba(244,244,244,1); background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F; border: 1px solid #ccc;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
...@@ -773,36 +533,11 @@ export default { ...@@ -773,36 +533,11 @@ export default {
} }
.table_container{ .table_container{
width: 97%; width: 97%;
height: calc(100% - 40px);
margin-top: 20px; margin-top: 20px;
.editBtn{
color: #0D867F;
}
.delBtn{
color: #DB6209;
}
.stopBtn{
color: #E7A20E;
}
} }
.el-pagination{ .el-pagination{
margin-top: 50px; margin-top: 30px;
}
.dialog_form_item{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.dialog_form_item_title{
flex-shrink: 0;
margin-right: 15px;
width: 100px;
text-align: right;
.reqIcon{
color: red;
}
}
/deep/ .el-dialog__header{
text-align: left;
} }
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F; background-color: #0D867F;
......
src/views/comCenterServeList/pages/page3.vue
<template> <template>
<div class="JiaGouYuanShuGuanLi"> <div class="typicalExampleManage">
<div class="table_container"> <div class="table_container">
<div class="search_menu"> <div class="search_menu">
<div class="search_menu_item_container"> <div class="search_menu_item_container">
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">架构视图名称</span> <span class="search_title">归属部门</span>
<el-input v-model="params.viewName" placeholder="请输入内容" class="search_item"></el-input> <el-select v-model="params.departId" placeholder="请选择" class="search_item">
<el-option v-for="item in selectData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">架构层次</span> <span class="search_title">服务来源</span>
<el-select v-model="params.archiLevelId" placeholder="请选择" clearable class="search_item"> <el-select v-model="params.abilitySource" placeholder="请选择" class="search_item">
<el-option v-for="(item,idnex) in levelList" :key="idnex" :label="item.name" :value="item.levelId" ></el-option> <el-option v-for="item in selectData2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">架构归属</span> <span class="search_title">服务名称</span>
<el-select v-model="params.archiBelongId" placeholder="请选择" clearable class="search_item"> <el-input v-model="params.inventoryName" placeholder="请输入内容" class="search_item"></el-input>
<el-option v-for="(item,idnex) in belongList" :key="idnex" :label="item.name" :value="item.belongId" ></el-option> </div>
</el-select> <div class="search_menu_item">
<span class="search_title">获取方式</span>
<el-input v-model="params.sourceType" placeholder="请输入内容" class="search_item"></el-input>
</div> </div>
</div> </div>
<div class="search_menu_btn_container"> <div class="search_menu_btn_container">
...@@ -32,36 +36,25 @@ ...@@ -32,36 +36,25 @@
</div> </div>
</div> </div>
<div class="search_btn"> <div class="search_btn">
<!-- <el-button type="primary" size="medium" icon="el-icon-document-add" @click="operate('add')">启用</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete" @click="operate('delMultiple')">停用</el-button> -->
<el-button type="primary" size="medium" icon="el-icon-document-add">启用</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete">停用</el-button>
</div> </div>
<el-table :data="tableData" stripe border height="450"> <el-table :height="tableHeight" @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" stripe border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column> <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="viewName" label="架构视图名称" width="150" align="center"></el-table-column> <el-table-column prop="inventoryName" label="服务名称" align="center"></el-table-column>
<el-table-column prop="archiLevelId" label="架构层次" width="150" align="center"> <el-table-column prop="tcType" label="服务来源" align="center"></el-table-column>
<template slot-scope="scope"> <el-table-column prop="departName" label="归属部门" align="center"></el-table-column>
<span >{{dicObj.archiLevelId[scope.row.archiLevelId]}}</span> <el-table-column prop="compName" label="建设单位" align="center"></el-table-column>
</template> <el-table-column prop="publishTime" label="发布时间" align="center" :show-overflow-tooltip="true"></el-table-column>
</el-table-column> <el-table-column prop="description" label="简介" align="center"></el-table-column>
<el-table-column prop="archiBelongId" label="架构归属" width="150" align="center"> <el-table-column prop="inventoryVersion" label="版本" align="center"></el-table-column>
<template slot-scope="scope"> <el-table-column label="操作" width="150" align="center">
<span >{{dicObj.archiBelongId[scope.row.archiBelongId]}}</span>
</template>
</el-table-column>
<el-table-column prop="content" label="视图描述" width="150" align="center"></el-table-column>
<el-table-column prop="eleName" label="元素范围" width="150" align="center"></el-table-column>
<el-table-column prop="relName" label="包含元素" width="150" align="center"></el-table-column>
<el-table-column prop="version" label="字典版本号" width="150" align="center"></el-table-column>
<el-table-column prop="state" label="字典版本状态" align="center">
<template slot-scope="scope">
<span >{{dicObj.state[scope.row.state]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="360" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;"> <div style="display: flex;align-items: center;justify-content: center;">
<el-button :class="scope.row.state == 1 ? '':'editBtn'" icon="el-icon-edit" size="mini" @click="operate('edit',scope.row)" :disabled="scope.row.state == 1">编辑</el-button> <el-button icon="el-icon-view" type="primary" size="mini" @click="operate('view',scope.row)">查看</el-button>
<el-button :class="scope.row.state == 1 ? '':'editBtn'" icon="el-icon-upload2" size="mini" @click="operate('pushEdit',scope.row)" :disabled="scope.row.state == 1">发布</el-button>
<el-button :class="scope.row.state != 1 ? '':'stopBtn'" icon="el-icon-remove-outline" size="mini" @click="operate('stop',scope.row)" :disabled="scope.row.state != 1">停用</el-button>
<!-- <el-button icon="el-icon-delete" size="mini" @click="operate('del',scope.row)" :disabled="scope.row.state != 2">删除</el-button> -->
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -70,344 +63,195 @@ ...@@ -70,344 +63,195 @@
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="page.current" :current-page="pager.current"
:page-sizes="page.sizes" :page-sizes="pager.sizes"
:page-size="page.size" :page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="page.total"> :total="pager.total">
</el-pagination> </el-pagination>
</div> </div>
<!-- 第一个弹窗 -->
<el-dialog <el-dialog
:title="title" :title="title"
:visible.sync="add_dialog" :visible.sync="add_dialog"
:center="false" :center="false"
width="60%"> width="60%">
<div class="add_dialog_content"> <div class="add_dialog_content">
<div class="dialog_content_1">
<div class="dialog_form_item">
<div class="dialog_form_item_title">架构视图名称</div>
<el-input v-model="formData.viewName" placeholder="请输入内容" :disabled="true" class="search_item"></el-input>
<!-- <el-select v-model="params.viewName" placeholder="" :disabled="true" class="search_item">
<el-option v-for="(item,idnex) in viewNameList" :key="idnex" :label="item" :value="item" ></el-option>
</el-select> -->
</div>
<div class="dialog_form_item">
<div class="dialog_form_item_title">架构层次</div>
<el-select v-model="formData.archiLevelId" placeholder="" :disabled="true" class="search_item">
<el-option v-for="(item,idnex) in levelList" :key="idnex" :label="item.name" :value="item.levelId" ></el-option>
</el-select>
</div>
<div class="dialog_form_item">
<div class="dialog_form_item_title">架构归属</div>
<el-select v-model="formData.archiBelongId" placeholder="" :disabled="true" class="search_item">
<el-option v-for="(item,idnex) in belongList" :key="idnex" :label="item.name" :value="item.belongId" ></el-option>
</el-select>
</div>
</div>
<el-table :data="tableData2" stripe border height="350" @cell-dblclick="tableDbclick">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="fieldName" label="字段名" align="center">
</el-table-column>
<el-table-column prop="cnName" label="中文名" align="center">
</el-table-column>
<el-table-column prop="displayOrder" label="排序" align="center">
</el-table-column>
<el-table-column prop="contentLength" label="长度" align="center">
</el-table-column>
<el-table-column prop="controlType" label="控件" align="center">
<template slot-scope="scope">
<span>{{dicObj.controlType[scope.row.controlType]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;">
<el-button icon="el-icon-edit" size="mini" @click="operateDia('edit',scope.row)">编辑</el-button>
<el-button icon="el-icon-delete" size="mini" @click="operateDia('del',scope.row,scope.$index)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="newBtn">
<el-button class="addItem" icon="el-icon-plus" circle @click="operateDia('add')"></el-button>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="operate('push')">发布</el-button>
<el-button class="greenButton" @click="operate('create')">保存</el-button>
<el-button @click="add_dialog = false">取消</el-button>
</span>
</el-dialog>
<!-- 第二个弹窗 -->
<el-dialog
:title="title2"
:visible.sync="add_dialog2"
:center="false"
width="40%">
<div class="add_dialog_content"> <div class="add_dialog_content">
<el-form :model="formData2" :rules="rules" ref="page3Form"> <el-form :model="formData" ref="form">
<div class="form_item_container"> <div class="form_item_container">
<el-form-item class="cross" label="字段名:" prop="fieldName"> <el-form-item label="案例名称:" prop="tcName">
<el-input v-model="formData2.fieldName" maxlength="100"></el-input> <el-input v-model="formData.tcName"></el-input>
</el-form-item> </el-form-item>
<el-form-item class="cross" label="中文名:" prop="cnName"> <el-form-item label="案例类型:" prop="tcType">
<el-input v-model="formData2.cnName" maxlength="100"></el-input> <el-select v-model="formData.tcType" placeholder="请选择">
<el-option v-for="item in selectData1" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item class="cross" label="排序:" prop="displayOrder"> <el-form-item label="项目类型:" prop="prjType">
<el-input v-model="formData2.displayOrder" maxlength="100"></el-input> <el-select v-model="formData.prjType" placeholder="请选择">
<el-option v-for="item in selectData3" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="建设内容:" prop="buildContent">
<el-input v-model="formData.buildContent"></el-input>
</el-form-item> </el-form-item>
<el-form-item class="cross" label="长度:" prop="contentLength"> <el-form-item label="问题类型:" prop="problemType">
<el-input v-model="formData2.contentLength" maxlength="100"></el-input> <el-select v-model="formData.problemType" placeholder="请选择">
<el-option v-for="item in selectData2" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item class="cross" label="控件:" prop="controlType"> <el-form-item label="问题等级:" prop="problemLevel">
<el-select v-model="formData2.controlType" placeholder="请选择" clearable> <el-select v-model="formData.problemLevel" placeholder="请选择">
<el-option v-for="(item,idnex) in selectTypeList" :key="idnex" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in selectData4" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item class="cross1" label="架构详情:" prop="archiDetail">
<el-input type="textarea" v-model="formData.archiDetail" maxlength="200" show-word-limit></el-input>
</el-form-item>
<el-form-item class="cross1" label="问题描述:" prop="problemContent">
<el-input type="textarea" v-model="formData.problemContent" maxlength="200" show-word-limit></el-input>
</el-form-item>
</div> </div>
</el-form> </el-form>
</div> </div>
</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="operateDia('save')">保存</el-button> <el-button class="greenButton" @click="operate('create')">确定</el-button>
<el-button @click="add_dialog2 = false">取消</el-button> <el-button @click="add_dialog = false">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { import {
getYMXZDGLlist, getComCenterServeList,
getYMXZDGLAdd,
getYMXZDGLDel, getDianXingAnLiSelectData,
getYMXZDGLUpdate, getTypicalExampleList,
getViewNameList, getTypicalExampleAdd,
getYMXZDGLProyList, getTypicalExampleUpdate,
getYMXZDGLProyDel, getTypicalExampleDel,
getYMXZDGLProyAdd, getTypicalExampleExcel,
getYMXZDGLProyUpdate, } from '@/api/index.js';
query_jia_gou_ceng_ci, import { MessageBox, Message } from 'element-ui';
query_jia_gou_gui_shu, import $ from 'jquery';
} from "@/api/index.js";
export default { export default {
name: 'page3', name: 'comCenterServePage3',
components: { components: {
}, },
data() { data() {
return { return {
tableData: [], tableData: [],
tableData2: [],
selectList: [],
add_dialog: false, add_dialog: false,
title: "", title: "",
openType: "", loading: false,
add_dialog: false, selectList: [],
add_dialog2: false, selectData1: [
title2: "",
query_item1: null,
query_item3: null,
query_item4: null,
let1: '',
let2: '',
let3: '',
let4: '',
formData: {
archiLevelId: "",
archiBelongId: "",
viewName: "",
content: "",
},
formData2: {
fieldName: "",
cnName: "",
displayOrder: "",
contentLength: "",
controlType: "",
},
rules: {
fieldName: [
{ required: true, message: '请输入字段名', trigger: 'blur' },
],
cnName: [
{ required: true, message: '请输入中文名', trigger: 'blur' },
], ],
displayOrder: [ selectData2: [
{ required: true, message: '请输字段入排序', trigger: 'blur' },
], ],
contentLength: [ selectData3: [
{ required: true, message: '请输入字段长度', trigger: 'blur' },
], ],
controlType: [ selectData4: [
{ required: true, message: '请选择控件类型', trigger: 'change' },
], ],
},
params: { params: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
viewName: "", departId: "",
archiLevelId: "", abilitySource: "",
archiBelongId: "", inventoryName: "",
type: 3, sourceType: "",
}, // 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力
page: { abilityType: "3",
},
pager: {
current: 1, current: 1,
sizes: [10, 20, 50, 100, 200], sizes: [10, 20, 50, 100, 200],
size: 10, size: 10,
total: 0, //总条数 total: 0, //总条数
}, },
formData: {
tcName: '',
tcType: '',
prjType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: "",
},
tableHeight: null,
dicObj: { dicObj: {
state: { tcType: {
0: "已停用",
1: "已发布",
2: "暂存",
},
archiLevelId: {
},
archiBelongId: {
},
controlType: {
0: "单行文本框",
1: "多行文本框",
2: "下拉框",
}
},
stateList: [
{
label: "已发布",
value: 1,
},
{
label: "已停用",
value: 0,
}, },
{ prjType: {},
label: "暂存", problemType: {},
value: 2, problemLevel: {},
}, },
],
levelList: [
],
belongList: [
],
viewNameList: [],
selectTypeList: [
{
label: "单行文本框",
value: 0,
},
{
label: "多行文本框",
value: 1,
},
{
label: "下拉框",
value: 2,
},
],
columnIsShow: false,
editIndex: -1, // 当前编辑行
}; };
}, },
mounted() { mounted(){
// 获取下拉 window.addEventListener('resize', () => {
this.getLevelList(); this.set_table_height();
this.getBelongList(); })
this.set_table_height();
// 初始化查询列表 // 初始化查询列表
this.getList(); this.getList();
// 查询视图下拉 // 获取元素列表
// this.getViewNameList(); // this.get_an_li_lei_xing_select();
}, // this.get_wen_ti_lei_xing_select();
created() { // this.get_xiang_mu_lei_xing_select();
// this.get_wen_ti_deng_ji_select();
}, },
methods: { methods: {
// 获取下拉
getLevelList() {
query_jia_gou_ceng_ci().then(res => {
if (res.code == 200) {
this.levelList = res.data;
this.levelList.forEach(item=>{
this.dicObj.archiLevelId[item.levelId] = item.name;
})
}
});
},
getBelongList() {
query_jia_gou_gui_shu().then(res => {
if (res.code == 200) {
this.belongList = res.data;
this.belongList.forEach(item=>{
this.dicObj.archiBelongId[item.belongId] = item.name;
})
}
});
},
// 查询列表 // 查询列表
getList() { getList() {
getYMXZDGLlist(this.params).then(res => { getComCenterServeList(this.params).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.page.total = res.data.total; this.pager.total = res.data.total;
this.tableData = res.data.records; this.tableData = res.data.records;
} }
}); });
}, },
// 获取下拉
getViewNameList() {
getViewNameList().then(res => {
if (res.code == 200) {
let arr = JSON.parse(res.msg);
let viewStr = arr && arr[0]? arr[0].viewName:'';
this.viewNameList = viewStr.split(",");
}
});
},
// 重置 // 重置
reset(){ reset() {
this.params = { this.params = {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
viewName: "", departId: "",
archiLevelId: "", abilitySource: "",
archiBelongId: "", inventoryName: "",
type: 3, sourceType: "",
// 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力
abilityType: "1",
} }
}, },
// 分页事件
handleSizeChange(val) {
this.page.current = 1;
this.params.current = 1;
this.page.size = val;
this.params.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.page.current = val;
this.params.current = val;
this.getList();
},
// 所有操作 // 所有操作
operate(type,item){ operate(type,item){
this.openType = type; this.openType = type;
if (type == "edit") { if (type == "add") {
this.add_dialog = true;
this.title = "新建案例";
this.resetForm();
}else if (type == "edit") {
this.add_dialog = true; this.add_dialog = true;
this.title = "编辑字典"; this.title = "编辑案例";
this.formData = item; this.formData = item;
this.getProyList(item); this.formData.tcType = String(this.formData.tcType);
this.formData.problemType = String(this.formData.problemType);
this.formData.prjType = String(this.formData.prjType);
this.formData.problemLevel = String(this.formData.problemLevel);
}else if (type == "create") { }else if (type == "create") {
this.formData.state = 2; if (this.formData.ktcId) {
if (this.formData.dicyId) {
// 编辑保存 // 编辑保存
getYMXZDGLUpdate(this.formData).then(res => { getTypicalExampleUpdate(this.formData).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.$message.success("保存成功"); this.$message.success("保存成功");
this.add_dialog = false; this.add_dialog = false;
...@@ -417,33 +261,11 @@ export default { ...@@ -417,33 +261,11 @@ export default {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
}); });
}
}else if (type == "push") {
if (this.formData.dicyId) {
// 编辑发布
this.formData.state = 1;
getYMXZDGLUpdate(this.formData).then(res => {
if (res.code == 200) {
this.$message.success("发布成功");
this.add_dialog = false;
this.getList();
}else{ }else{
this.add_dialog = false; // 新建保存
this.$message.error(res.msg); getTypicalExampleAdd(this.formData).then(res => {
}
});
}
}else if (type == "pushEdit") {
this.$confirm("确认发布吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.formData = item;
this.formData.state = 1;
getYMXZDGLUpdate(this.formData).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.$message.success("发布成功"); this.$message.success("保存成功");
this.add_dialog = false; this.add_dialog = false;
this.getList(); this.getList();
}else{ }else{
...@@ -451,241 +273,158 @@ export default { ...@@ -451,241 +273,158 @@ export default {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
}); });
}).catch(() => {
});
}else if (type == "stop") {
// 停用
this.$confirm("确认停用吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.formData = item;
this.formData.state = 0;
getYMXZDGLUpdate(this.formData).then(res => {
if (res.code == 200) {
this.$message.success("停用成功");
this.getList();
}else{
this.$message.error(res.msg);
} }
});
}).catch(() => {
});
}else if (type == "del") {
// 删除
// this.formData = item;
// this.$confirm("确认删除吗", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning"
// }).then(() => {
// getYMXZDGLDel(this.formData).then(res => {
// if (res.code == 200) {
// this.$message.success("删除成功");
// this.getList();
// }
// });
// });
} }
}, },
// 新建清空表单 // 新建清空表单
resetForm(){ resetForm(){
this.formData = { this.formData = {
archiLevelId: "", tcName: '',
archiBelongId: "", tcType: '',
viewName: "", prjType: '',
content: "", buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: "",
} }
}, },
resetFormData2(){
this.formData2 = {
fieldName: "",
cnName: "",
displayOrder: "",
contentLength: "",
controlType: "",
};
},
// 表格多选 get_an_li_lei_xing_select() {//案例类型下拉
handleSelectionChange(e) { const params = {
this.selectList = e; key: "kl_case_type"
},
selectInit(row,index){
if(row.state != "1"){
return true //可勾选
}else{
return false //不可勾选
} }
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
this.selectData1 = res.data;
}
})
}, },
get_wen_ti_lei_xing_select() {//问题类型下拉
// 对话表格操作 const params = {
operateDia( type, scopeRow, index){ key: "kl_question_type"
switch (type) {
// 添加
case 'add':
this.add_dialog2 = true;
this.title2 = "新建字典属性";
this.resetFormData2();
this.$nextTick(() => {
this.$refs.page3Form.resetFields();
});
break;
// 编辑
case 'edit':
this.add_dialog2 = true;
this.title2 = "编辑字典属性";
this.formData2 = scopeRow;
break;
// 保存
case 'save':
this.$refs.page3Form.validate(valid => {
if(valid) {
if (this.formData2.propertyId) {
let params = {
fieldName: this.formData2.fieldName,
cnName: this.formData2.cnName,
displayOrder: this.formData2.displayOrder,
contentLength: this.formData2.contentLength,
controlType: this.formData2.controlType,
propertyId: this.formData2.propertyId,
type: this.formData.type,
typeId: this.formData.typeId,
version: this.formData.version,
dicyId: this.formData.dicyId,
state: this.formData.state,
} }
// 编辑保存 getDianXingAnLiSelectData(params).then(res => {
getYMXZDGLProyUpdate(params).then(res => { if(res.code == 200) {
if (res.code == 200) { this.selectData2 = res.data;
this.$message.success("保存成功");
this.add_dialog2 = false;
this.getProyList(this.formData);
}else{
this.add_dialog2 = false;
this.$message.error(res.msg);
} }
}); })
}else{ },
let params = { get_xiang_mu_lei_xing_select() {//项目类型下拉
fieldName: this.formData2.fieldName, const params = {
cnName: this.formData2.cnName, key: "kl_project_type"
displayOrder: this.formData2.displayOrder,
contentLength: this.formData2.contentLength,
controlType: this.formData2.controlType,
type: this.formData.type,
typeId: this.formData.typeId,
version: this.formData.version,
dicyId: this.formData.dicyId,
state: this.formData.state,
} }
// 新建保存 getDianXingAnLiSelectData(params).then(res => {
getYMXZDGLProyAdd(params).then(res => { if(res.code == 200) {
if (res.code == 200) { this.selectData3 = res.data;
this.$message.success("新建成功");
this.add_dialog2 = false;
this.getProyList(this.formData);
}else{
this.add_dialog2 = false;
this.$message.error(res.msg);
}
});
} }
})
},
get_wen_ti_deng_ji_select() {//问题等级下拉
const params = {
key: "kl_question_level"
} }
}); getDianXingAnLiSelectData(params).then(res => {
break; if(res.code == 200) {
// 删除 this.selectData4 = res.data;
case 'del':
this.$confirm("确认删除吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
getYMXZDGLProyDel(scopeRow).then(res => {
if (res.code == 200) {
this.$message.success("删除成功");
this.getProyList(this.formData);
}else{
this.$message.error(res.msg);
} }
}); })
}).catch(() => { },
});
break; set_table_height() {//动态设置表格高度
const table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height();
const search_btn_height = $(".search_btn").outerHeight(true);
this.tableHeight = table_container_height - search_menu_height - search_btn_height - 140 + 'px';
},
selectable(row) {//表格勾选框禁用
if(row.state == 1) {
return false; // 禁用
} else {
return true; //不禁用
} }
}, },
tableDbclick( row, column, cell, e){ // 表格多选
// this.editIndex = row.index; handleSelectionChange(e) {
// this.columnIsShow = true; this.selectList = e;
}, },
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.params.current = 1;
// 获取字典属性接口 this.pager.size = val;
getProyList(item) { this.params.pageSize = val;
let params = { this.getList();
type: item.type,
typeId: item.typeId,
}
getYMXZDGLProyList(params).then(res => {
if (res.code == 200) {
this.tableData2 = res.data;
}
});
}, },
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.params.current = val;
this.getList();
}, },
}
} }
</script> </script>
<style lang="scss" scoped> <style>
.JiaGouYuanShuGuanLi{ .confirmClass{
width: 100%; background-color: #0D867F !important;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
} }
.add_dialog_content{ .el-message-box__content{
width: 100%; padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.form_item_container{ .form_item_container{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.cross{
width: 50% !important;
/deep/ .el-form-item__label{
width: 25%;
}
/deep/ .el-form-item__content{
width: 65% !important;
.el-select{
width: 100% !important;
}
}
} }
.el-form-item{ .el-form-item{
display: flex; display: flex;
width: 100%; width: 33%;
}
} }
.cross1{
width: 100%;
} }
.newBtn{ /deep/ .cross1 > .el-form-item__content{
margin-top: 5px; width: 86.4% !important;
.addItem{
background-color: #0D867F;
color: #fff;
} }
.typicalExampleManage{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
} }
.dialog_content_1{ .dialog_content_1{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.dialog_form_item_title{
width: 90px;
} }
.el-input{ .el-button--primary{
width: 260px; background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
} }
.el-select{ .add_select_item_icon_container{
width: 260px; margin-top: 10px;
text-align: center;
cursor: pointer;
} }
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-input-group__append{
background-color: #0D867F;
color: #fff;
cursor: pointer;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
} }
.search_menu{ .search_menu{
display: flex; display: flex;
...@@ -715,8 +454,23 @@ export default { ...@@ -715,8 +454,23 @@ export default {
.search_btn{ .search_btn{
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: 10px; margin-top: 50px;
margin-bottom: 10px; margin-bottom: 20px;
}
.el-button--default{
border: 0;
}
.shanChu_btn{
color: #DD6A15;
background-color: #F8EBE2;
}
.tingYong_btn{
color: #DEA82A;
background-color: #FDF6E6;
}
.el-button.is-disabled{
color: #C0C4CC !important;
background-color: #fff !important;
} }
.add_btn{ .add_btn{
display: flex; display: flex;
...@@ -768,7 +522,7 @@ export default { ...@@ -768,7 +522,7 @@ export default {
height: 32px; height: 32px;
background: rgba(244,244,244,1); background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F; border: 1px solid #ccc;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
...@@ -779,36 +533,11 @@ export default { ...@@ -779,36 +533,11 @@ export default {
} }
.table_container{ .table_container{
width: 97%; width: 97%;
height: calc(100% - 40px);
margin-top: 20px; margin-top: 20px;
.editBtn{
color: #0D867F;
}
.delBtn{
color: #DB6209;
}
.stopBtn{
color: #E7A20E;
}
} }
.el-pagination{ .el-pagination{
margin-top: 50px; margin-top: 30px;
}
.dialog_form_item{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.dialog_form_item_title{
flex-shrink: 0;
margin-right: 15px;
width: 100px;
text-align: right;
.reqIcon{
color: red;
}
}
/deep/ .el-dialog__header{
text-align: left;
} }
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F; background-color: #0D867F;
......
src/views/comCenterServeList/pages/page4.vue 0 → 100644
<template>
<div class="typicalExampleManage">
<div class="table_container">
<div class="search_menu">
<div class="search_menu_item_container">
<div class="search_menu_item">
<span class="search_title">归属部门</span>
<el-select v-model="params.departId" placeholder="请选择" class="search_item">
<el-option v-for="item in selectData1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">服务来源</span>
<el-select v-model="params.abilitySource" placeholder="请选择" class="search_item">
<el-option v-for="item in selectData2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<div class="search_menu_item">
<span class="search_title">服务名称</span>
<el-input v-model="params.inventoryName" placeholder="请输入内容" class="search_item"></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">获取方式</span>
<el-input v-model="params.sourceType" placeholder="请输入内容" class="search_item"></el-input>
</div>
</div>
<div class="search_menu_btn_container">
<div class="query_btn" @click="getList">
<img class="btn_icon" src="@/assets/archi-ele-list/search.png" alt="" />
<p>查询</p>
</div>
<div class="reset_btn" @click="reset">
<img class="btn_icon" src="@/assets/archi-ele-list/reset.png" alt="" />
<p>重置</p>
</div>
</div>
</div>
<div class="search_btn">
<!-- <el-button type="primary" size="medium" icon="el-icon-document-add" @click="operate('add')">启用</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete" @click="operate('delMultiple')">停用</el-button> -->
<el-button type="primary" size="medium" icon="el-icon-document-add">启用</el-button>
<el-button type="primary" size="medium" icon="el-icon-delete">停用</el-button>
</div>
<el-table :height="tableHeight" @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" stripe border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="inventoryName" label="服务名称" align="center"></el-table-column>
<el-table-column prop="tcType" label="服务来源" align="center"></el-table-column>
<el-table-column prop="departName" label="归属部门" align="center"></el-table-column>
<el-table-column prop="compName" label="建设单位" align="center"></el-table-column>
<el-table-column prop="publishTime" label="发布时间" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="description" label="简介" align="center"></el-table-column>
<el-table-column prop="inventoryVersion" label="版本" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;">
<el-button icon="el-icon-view" type="primary" size="mini" @click="operate('view',scope.row)">查看</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pager.current"
:page-sizes="pager.sizes"
:page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pager.total">
</el-pagination>
</div>
<el-dialog
:title="title"
:visible.sync="add_dialog"
:center="false"
width="60%">
<div class="add_dialog_content">
<div class="add_dialog_content">
<el-form :model="formData" ref="form">
<div class="form_item_container">
<el-form-item label="案例名称:" prop="tcName">
<el-input v-model="formData.tcName"></el-input>
</el-form-item>
<el-form-item label="案例类型:" prop="tcType">
<el-select v-model="formData.tcType" placeholder="请选择">
<el-option v-for="item in selectData1" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="项目类型:" prop="prjType">
<el-select v-model="formData.prjType" placeholder="请选择">
<el-option v-for="item in selectData3" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="建设内容:" prop="buildContent">
<el-input v-model="formData.buildContent"></el-input>
</el-form-item>
<el-form-item label="问题类型:" prop="problemType">
<el-select v-model="formData.problemType" placeholder="请选择">
<el-option v-for="item in selectData2" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="问题等级:" prop="problemLevel">
<el-select v-model="formData.problemLevel" placeholder="请选择">
<el-option v-for="item in selectData4" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item class="cross1" label="架构详情:" prop="archiDetail">
<el-input type="textarea" v-model="formData.archiDetail" maxlength="200" show-word-limit></el-input>
</el-form-item>
<el-form-item class="cross1" label="问题描述:" prop="problemContent">
<el-input type="textarea" v-model="formData.problemContent" maxlength="200" show-word-limit></el-input>
</el-form-item>
</div>
</el-form>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="operate('create')">确定</el-button>
<el-button @click="add_dialog = false">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getComCenterServeList,
getDianXingAnLiSelectData,
getTypicalExampleList,
getTypicalExampleAdd,
getTypicalExampleUpdate,
getTypicalExampleDel,
getTypicalExampleExcel,
} from '@/api/index.js';
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'comCenterServePage2',
components: {
},
data() {
return {
tableData: [],
add_dialog: false,
title: "",
loading: false,
selectList: [],
selectData1: [
],
selectData2: [
],
selectData3: [
],
selectData4: [
],
params: {
current: 1,
pageSize: 10,
departId: "",
abilitySource: "",
inventoryName: "",
sourceType: "",
// 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力
abilityType: "1",
},
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0, //总条数
},
formData: {
tcName: '',
tcType: '',
prjType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: "",
},
tableHeight: null,
dicObj: {
tcType: {
},
prjType: {},
problemType: {},
problemLevel: {},
},
};
},
mounted(){
window.addEventListener('resize', () => {
this.set_table_height();
})
this.set_table_height();
// 初始化查询列表
this.getList();
// 获取元素列表
// this.get_an_li_lei_xing_select();
// this.get_wen_ti_lei_xing_select();
// this.get_xiang_mu_lei_xing_select();
// this.get_wen_ti_deng_ji_select();
},
methods: {
// 查询列表
getList() {
getComCenterServeList(this.params).then(res => {
if (res.code == 200) {
this.pager.total = res.data.total;
this.tableData = res.data.records;
}
});
},
// 重置
reset() {
this.params = {
current: 1,
pageSize: 10,
departId: "",
abilitySource: "",
inventoryName: "",
sourceType: "",
// 1：业务中台服务能力，2：数据中台资源目录，3：数据中台资源服务，4：技术中台公共技术能力
abilityType: "4",
}
},
// 所有操作
operate(type,item){
this.openType = type;
if (type == "add") {
this.add_dialog = true;
this.title = "新建案例";
this.resetForm();
}else if (type == "edit") {
this.add_dialog = true;
this.title = "编辑案例";
this.formData = item;
this.formData.tcType = String(this.formData.tcType);
this.formData.problemType = String(this.formData.problemType);
this.formData.prjType = String(this.formData.prjType);
this.formData.problemLevel = String(this.formData.problemLevel);
}else if (type == "create") {
if (this.formData.ktcId) {
// 编辑保存
getTypicalExampleUpdate(this.formData).then(res => {
if (res.code == 200) {
this.$message.success("保存成功");
this.add_dialog = false;
this.getList();
}else{
this.add_dialog = false;
this.$message.error(res.msg);
}
});
}else{
// 新建保存
getTypicalExampleAdd(this.formData).then(res => {
if (res.code == 200) {
this.$message.success("保存成功");
this.add_dialog = false;
this.getList();
}else{
this.add_dialog = false;
this.$message.error(res.msg);
}
});
}
}
},
// 新建清空表单
resetForm(){
this.formData = {
tcName: '',
tcType: '',
prjType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: "",
}
},
get_an_li_lei_xing_select() {//案例类型下拉
const params = {
key: "kl_case_type"
}
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
this.selectData1 = res.data;
}
})
},
get_wen_ti_lei_xing_select() {//问题类型下拉
const params = {
key: "kl_question_type"
}
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
this.selectData2 = res.data;
}
})
},
get_xiang_mu_lei_xing_select() {//项目类型下拉
const params = {
key: "kl_project_type"
}
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
this.selectData3 = res.data;
}
})
},
get_wen_ti_deng_ji_select() {//问题等级下拉
const params = {
key: "kl_question_level"
}
getDianXingAnLiSelectData(params).then(res => {
if(res.code == 200) {
this.selectData4 = res.data;
}
})
},
set_table_height() {//动态设置表格高度
const table_container_height = $(".table_container").height();
const search_menu_height = $(".search_menu").height();
const search_btn_height = $(".search_btn").outerHeight(true);
this.tableHeight = table_container_height - search_menu_height - search_btn_height - 140 + 'px';
},
selectable(row) {//表格勾选框禁用
if(row.state == 1) {
return false; // 禁用
} else {
return true; //不禁用
}
},
// 表格多选
handleSelectionChange(e) {
this.selectList = e;
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1;
this.params.current = 1;
this.pager.size = val;
this.params.pageSize = val;
this.getList();
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val;
this.params.current = val;
this.getList();
},
}
}
</script>
<style>
.confirmClass{
background-color: #0D867F !important;
}
.el-message-box__content{
padding: 60px 15px 60px 15px;
}
</style>
<style scoped>
.form_item_container{
display: flex;
flex-wrap: wrap;
}
.el-form-item{
display: flex;
width: 33%;
}
.cross1{
width: 100%;
}
/deep/ .cross1 > .el-form-item__content{
width: 86.4% !important;
}
.typicalExampleManage{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1{
display: flex;
justify-content: space-between;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.add_select_item_icon_container{
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-input-group__append{
background-color: #0D867F;
color: #fff;
cursor: pointer;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.search_menu{
display: flex;
justify-content: space-between;
}
.search_menu_item_container{
display: flex;
align-items: center;
}
.search_menu_btn_container{
display: flex;
align-items: center;
}
.search_menu_item{
display: flex;
align-items: center;
width: 344px;
}
.search_title{
/* width: 20%; */
flex-shrink: 0;
margin-right: 15px;
}
.search_item{
width: 60%;
}
.search_btn{
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.el-button--default{
border: 0;
}
.shanChu_btn{
color: #DD6A15;
background-color: #F8EBE2;
}
.tingYong_btn{
color: #DEA82A;
background-color: #FDF6E6;
}
.el-button.is-disabled{
color: #C0C4CC !important;
background-color: #fff !important;
}
.add_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
}
.version_btn{
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
height: calc(100% - 40px);
margin-top: 20px;
}
.el-pagination{
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
</style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!