Skip to content

liangzhen / framework-tools-web

Go to a project
Commit ded8f87a by liangzhen
Options

无用界面删除

1 parent b481bb9b
Inline Side-by-side
Showing with 92 additions and 1566 deletions
src/api/system.js
......@@ -56,3 +56,5 @@ export function addExpertUser(params) {
export function userGetId(params) {
return post(ARCH_MANAGE +'/user/get', params)
}
//角色管理
\ No newline at end of file
src/router/index.js
......@@ -143,23 +143,6 @@ export const routes = [
},
},
{
path: "/main/typicalExampleManage", //典型案例库管理
name: "typicalExampleManage",
component: () => import("@/views/typical-example-manage/index.vue"),
meta: {
title: "典型案例库管理",
},
},
{
path: "/main/typicalExampleRelativeUse", //典型案例库关联使用
name: "typicalExampleRelativeUse",
component: () =>
import("@/views/typical-example-relative-use/index.vue"),
meta: {
title: "典型案例库关联使用",
},
},
{
path: "/main/totalArchiPropertyDocument", //总体架构资产文档库
name: "totalArchiPropertyDocument",
component: () =>
......@@ -168,11 +151,6 @@ export const routes = [
title: "总体架构资产文档库",
},
},
// {
// path: '/main/YuanMoXingGuanLiTable',//drawio跳转的表格
// name: 'YuanMoXingGuanLiTable',
// component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiTable/index.vue'),
// },
{
path: "/main/etp-Manage", //专家人才库
name: "etp-Manage",
......
src/views/Main/components/AppMain.vue
......@@ -9,7 +9,7 @@
<img class="btn_icon" src="@/assets/images/a1.png" alt="" />
</div>
<div>
<p>早安，李晓霞，祝你开心每一天！</p>
<p>晚安，李永哲，祝你加班每一天！</p>
<p class="info">公司/职位/某某某</p>
</div>
</div>
......@@ -22,41 +22,45 @@
<p>编写架构方案</p>
</div>
</div>
<div class="buttom">
<div class="module">
<div class="left">
<!-- <p class="title">视图列表</p>
<p v-for="(item, index) in arr" :key=index class="content">
<span >{{ index+1 }}</span>{{ item.name }}
<div class="bottom">
<div class="module modules">
<div class="left child">
<p class="title">待办任务</p>
<p v-for="(item, index) in arr" :key="index" class="content">
<span>{{ index + 1 }}</span
>{{ item.name }}
</p>
<div class="left">
<p class="title">视图列表</p>
<p v-for="(item, index) in arr" :key=index class="content">
<span >{{ index+1 }}</span>{{ item.name }}
</div>
<div class="right child">
<p class="title">已办任务</p>
<p v-for="(item, index) in arr" :key="index" class="content">
<span>{{ index + 1 }}</span
>{{ item.name }}
</p>
</div> -->
</div>
</div>
<div class="module">
<p class="title">视图列表</p>
<p v-for="(item, index) in arr" :key=index class="content">
<span >{{ index+1 }}</span>{{ item.name }}
<p v-for="(item, index) in arr" :key="index" class="content">
<span>{{ index + 1 }}</span
>{{ item.name }}
</p>
</div>
<div class="module">
<p class="title">通知信息</p>
<p v-for="(item, index) in arr" :key=index class="content">
<span >{{ index+1 }}</span>{{ item.name }}
<p v-for="(item, index) in arr" :key="index" class="content">
<span>{{ index + 1 }}</span
>{{ item.name }}
</p>
</div>
<div class="module">
<p class="title">文档列表</p>
<p v-for="(item, index) in arr" :key=index class="content">
<span >{{ index+1 }}</span>{{ item.name }}
<p v-for="(item, index) in arr" :key="index" class="content">
<span>{{ index + 1 }}</span
>{{ item.name }}
</p>
</div>
</div>
</div>
<router-view :key="key" />
</keep-alive>
......@@ -67,17 +71,16 @@
<script>
export default {
name: "AppMain",
data(){
return{
arr:[
{name:'需要对XX项目架构进行审批'},
{name:'需要对XX项目架构进行审批'},
{name:'需要对XX项目架构进行审批'},
{name:'需要对XX项目架构进行审批'},
{name:'需要对XX项目架构进行审批'},
]
}
data() {
return {
arr: [
{ name: "需要对XX项目架构进行审批" },
{ name: "需要对XX项目架构进行审批" },
{ name: "需要对XX项目架构进行审批" },
{ name: "需要对XX项目架构进行审批" },
{ name: "需要对XX项目架构进行审批" },
],
};
},
computed: {
cachedViews() {
......@@ -136,9 +139,8 @@ export default {
margin: 10px;
display: flex;
.left {
// padding:30px 10px;
background: #fff;
width: 81%;
width: 82%;
height: 160px;
display: flex;
text-align: left;
......@@ -175,7 +177,8 @@ export default {
}
}
}
.buttom{
.bottom {
margin-left: 5px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
......@@ -187,16 +190,17 @@ export default {
text-align: left;
background: #fff;
.title{
.title {
border-bottom: 1px solid gainsboro;
line-height: 60px;
margin: 0;
padding-left: 20px;
}
.content{
.content {
padding-left: 20px;
line-height: 32px;
}
span{
span {
display: inline-block;
width: 20px;
height: 20px;
......@@ -207,29 +211,69 @@ export default {
line-height: 22px;
margin-right: 20px;
font-size: 14px;
}
>:nth-of-type(2) {
span{
> :nth-of-type(2) {
span {
background: black;
color: #fff;
}
}
>:nth-of-type(3) {
span{
> :nth-of-type(3) {
span {
background: black;
color: #fff;
}
}
>:nth-of-type(4) {
span{
> :nth-of-type(4) {
span {
background: black;
color: #fff;
}
}
}
}
}
.modules {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background:rgb(234, 234, 234)!important;
.child {
background: #fff;
flex: 0 0 49.4%;
box-sizing: border-box;
text-align: left;
// background: #fff;
span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
background: gainsboro !important;
color: #000 !important;
text-align: center;
line-height: 22px;
margin-right: 20px;
font-size: 14px;
}
> :nth-of-type(2) {
span {
background: black !important;
color: #fff !important;
}
}
> :nth-of-type(3) {
span {
background: black !important;
color: #fff !important;
}
}
> :nth-of-type(4) {
span {
background: black !important;
color: #fff !important;
}
}
}
}
</style>
src/views/typical-example-manage/index.vue deleted 100644 → 0
<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-input
v-model="searchParams.caseName"
placeholder="请输入内容"
class="search_item"
></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">案例类型</span>
<el-select
v-model="searchParams.caseType"
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="searchParams.problemType"
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>
<div class="search_menu_btn_container">
<div class="query_btn" @click="search_table">
<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-plus"
@click="exportFile"
>导出</el-button
>
</div>
<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="index"
label="序号"
width="80"
:index="indexMethod"
align="center"
></el-table-column>
<el-table-column
prop="caseName"
label="案例名称"
align="center"
></el-table-column>
<el-table-column
prop="caseType_"
label="案例类型"
align="center"
></el-table-column>
<el-table-column
prop="projectType_"
label="项目类型"
align="center"
></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"
></el-table-column>
<el-table-column
prop="problemLevel_"
label="问题等级"
align="center"
></el-table-column>
<el-table-column
prop="problemContent"
label="问题描述"
align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column label="操作" width="260" align="center">
<template slot-scope="scope">
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<el-button
icon="el-icon-edit"
type="primary"
size="mini"
@click="operate('edit', scope.row)"
>
编辑</el-button
>
<el-button
class="shanChu_btn"
icon="el-icon-delete"
size="mini"
@click="operate('del', 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="66%"
>
<div class="add_dialog_content">
<div class="add_dialog_content">
<el-form :model="formData" ref="form" :rules="rules">
<div class="form_item_container">
<el-form-item label="案例名称:" prop="caseName">
<el-input v-model="formData.caseName"></el-input>
</el-form-item>
<el-form-item label="案例类型:" prop="caseType">
<el-select v-model="formData.caseType" 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="projectType">
<el-select v-model="formData.projectType" 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 {
getDianXingAnLiSelectData,
getTypicalExampleList,
getTypicalExampleAdd,
getTypicalExampleUpdate,
getTypicalExampleDel,
getTypicalExampleExcel,
} from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
export default {
name: 'TypicalExampleManage',
components: {},
data() {
return {
tableData: [],
add_dialog: false,
title: '',
loading: false,
selectList: [],
selectData1: [],
selectData2: [],
selectData3: [],
selectData4: [],
searchParams: {
caseName: '',
caseType: '',
problemType: '',
},
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0, //总条数
},
formData: {
caseName: '',
caseType: '',
projectType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: '',
},
tableHeight: null,
rules: {
caseName: [
{ required: true, message: '请输入案例名称', trigger: 'blur' },
],
caseType: [
{ required: true, message: '请选择案例类型', trigger: 'change' },
],
projectType: [
{ required: true, message: '请选择项目类型', trigger: 'change' },
],
buildContent: [
{ required: true, message: '请输入建设内容', trigger: 'blur' },
],
problemType: [
{ required: true, message: '请选择问题类型', trigger: 'change' },
],
problemLevel: [
{ required: true, message: '请选择问题等级', trigger: 'change' },
],
archiDetail: [
{ required: true, message: '请输入架构详情', trigger: 'blur' },
],
problemContent: [
{ required: true, message: '请输入问题描述', trigger: 'blur' },
],
},
}
},
mounted() {
window.addEventListener('resize', () => {
this.set_table_height()
})
this.set_table_height()
// 初始化查询列表
this.getList()
// 获取元素列表
this.get_an_li_lei_xing_select().then((res) => {
this.selectData1 = res
})
this.get_wen_ti_lei_xing_select().then((res) => {
this.selectData2 = res
})
this.get_xiang_mu_lei_xing_select().then((res) => {
this.selectData3 = res
})
this.get_wen_ti_deng_ji_select().then((res) => {
this.selectData4 = res
})
},
methods: {
indexMethod(index) {
return (this.pager.current - 1) * this.pager.size + index + 1
},
search_table() {
//搜索
this.pager.current = 1
this.getList()
},
// 查询列表
getList() {
this.loading = true
const params = {
caseName: this.searchParams.caseName,
caseType: this.searchParams.caseType,
problemType: this.searchParams.problemType,
current: this.pager.current,
pageSize: this.pager.size,
}
getTypicalExampleList(params).then((res) => {
if (res.code == 200) {
this.loading = false
Promise.all([
this.get_an_li_lei_xing_select(),
this.get_xiang_mu_lei_xing_select(),
this.get_wen_ti_lei_xing_select(),
this.get_wen_ti_deng_ji_select(),
]).then((res2) => {
res.data.records.map((item) => {
let result1 = res2[0].find(
(item2) => item2.value == item.caseType,
)
let result2 = res2[1].find(
(item2) => item2.value == item.projectType,
)
let result3 = res2[2].find(
(item2) => item2.value == item.problemType,
)
let result4 = res2[3].find(
(item2) => item2.value == item.problemLevel,
)
item['caseType_'] = result1 ? result1.label : ''
item['projectType_'] = result2 ? result2.label : ''
item['problemType_'] = result3 ? result3.label : ''
item['problemLevel_'] = result4 ? result4.label : ''
})
this.pager.current = res.data.current
this.pager.total = res.data.total
this.pager.size = res.data.size
this.tableData = res.data.records
})
}
})
},
// 重置
reset() {
this.searchParams = {
caseName: '',
caseType: '',
problemType: '',
}
},
// 所有操作
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.caseType = String(this.formData.caseType)
this.formData.problemType = String(this.formData.problemType)
this.formData.projectType = String(this.formData.projectType)
this.formData.problemLevel = String(this.formData.problemLevel)
} else if (type == 'create') {
this.$refs.form.validate(valid => {
if (valid) {
if (this.formData.caseId) {
// 编辑保存
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)
}
})
}
} else {
return false
}
})
} else if (type == 'del') {
// 删除
this.$confirm('确认删除吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning',
})
.then(() => {
let params = {
ids: [item.caseId],
}
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.caseId)
})
this.$confirm('确认批量删除吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'messageClass',
confirmButtonClass: 'confirmClass',
type: 'warning',
})
.then(() => {
getTypicalExampleDel(params).then((res) => {
if (res.code == 200) {
this.$message.success('批量删除成功')
this.getList()
} else {
this.$message.error(res.msg)
}
})
})
.catch(() => {})
}
},
// 新建清空表单
resetForm() {
this.formData = {
caseName: '',
caseType: '',
projectType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: '',
}
},
exportFile() {
//导出
getTypicalExampleExcel(this.searchParams).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() {
//案例类型下拉
const params = {
key: 'kl_case_type',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
get_wen_ti_lei_xing_select() {
//问题类型下拉
const params = {
key: 'kl_question_type',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
get_xiang_mu_lei_xing_select() {
//项目类型下拉
const params = {
key: 'kl_project_type',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
get_wen_ti_deng_ji_select() {
//问题等级下拉
const params = {
key: 'kl_question_level',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(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 -
90 +
'px'
},
selectable(row) {
//表格勾选框禁用
if (row.state == 1) {
return false // 禁用
} else {
return true //不禁用
}
},
// 表格多选
handleSelectionChange(e) {
this.selectList = e
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1
this.pager.size = val
this.getList()
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val
this.getList()
},
},
}
</script>
<style>
.confirmClass {
background-color: #0d867f !important;
}
.el-message-box__content {
padding: 60px 15px 60px 15px;
}
</style>
<style scoped lang="scss">
.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: 14px;
margin-bottom: 14px;
}
.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>
src/views/typical-example-relative-use/index.vue deleted 100644 → 0
<template>
<div class="typicalExampleRelativeUse">
<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-input
v-model="searchParams.caseName"
placeholder="请输入内容"
class="search_item"
></el-input>
</div>
<div class="search_menu_item">
<span class="search_title">案例类型</span>
<el-select
v-model="searchParams.caseType"
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="searchParams.problemType"
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>
<div class="search_menu_btn_container">
<div class="query_btn" @click="search_table">
<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-plus"
@click="exportFile"
>导出</el-button
>
</div>
<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="index"
:index="indexMethod"
label="序号"
width="80"
align="center"
></el-table-column>
<el-table-column
prop="caseName"
label="案例名称"
align="center"
></el-table-column>
<el-table-column
prop="caseType_"
label="案例类型"
align="center"
></el-table-column>
<el-table-column
prop="projectType_"
label="项目类型"
align="center"
></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"
></el-table-column>
<el-table-column
prop="problemLevel_"
label="问题等级"
align="center"
></el-table-column>
<el-table-column
prop="problemContent"
label="问题描述"
align="center"
:show-overflow-tooltip="true"
></el-table-column>
<!-- <el-table-column label="操作" width="260" align="center">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;">
<el-button icon="el-icon-edit" type="primary" size="mini" @click="operate('edit',scope.row)"> 编辑</el-button>
<el-button class="shanChu_btn" icon="el-icon-delete" size="mini" @click="operate('del',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>
</div>
</template>
<script>
import {
getDianXingAnLiSelectData,
getTypicalExampleList,
getTypicalExampleExcel,
} from '@/api/index.js'
import { MessageBox, Message } from 'element-ui'
import $ from 'jquery'
export default {
name: 'TypicalExampleRelativeUse',
components: {},
data() {
return {
tableData: [],
selectList: [],
add_dialog: false,
loading: false,
selectTable: [],
selectData1: [],
selectData2: [],
selectData3: [],
selectData4: [],
searchParams: {
caseName: '',
caseType: '',
problemType: '',
},
dicObj: {},
pager: {
current: 1,
sizes: [10, 20, 50, 100, 200],
size: 10,
total: 0, //总条数
},
tableHeight: null,
}
},
mounted() {
window.addEventListener('resize', () => {
this.set_table_height()
})
this.set_table_height()
this.selectData1.forEach((item) => {
this.dicObj.caseType[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.get_an_li_lei_xing_select().then((res) => {
this.selectData1 = res
})
this.get_wen_ti_lei_xing_select().then((res) => {
this.selectData2 = res
})
this.get_xiang_mu_lei_xing_select().then((res) => {
this.selectData3 = res
})
this.get_wen_ti_deng_ji_select().then((res) => {
this.selectData4 = res
})
},
methods: {
indexMethod(index) {
return (this.pager.current - 1) * this.pager.size + index + 1
},
search_table() {
//搜索
this.pager.current = 1
this.getList()
},
get_an_li_lei_xing_select() {
//案例类型下拉
const params = {
key: 'kl_case_type',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
get_wen_ti_lei_xing_select() {
//问题类型下拉
const params = {
key: 'kl_question_type',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
get_xiang_mu_lei_xing_select() {
//项目类型下拉
const params = {
key: 'kl_project_type',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
get_wen_ti_deng_ji_select() {
//问题等级下拉
const params = {
key: 'kl_question_level',
}
return new Promise((resolve, reject) => {
getDianXingAnLiSelectData(params).then((res) => {
if (res.code == 200) {
resolve(res.data)
}
})
})
},
// 查询列表
getList() {
this.loading = true
const params = {
caseName: this.searchParams.caseName,
caseType: this.searchParams.caseType,
problemType: this.searchParams.problemType,
current: this.pager.current,
pageSize: this.pager.size,
}
getTypicalExampleList(params).then((res) => {
if (res.code == 200) {
this.loading = false
Promise.all([
this.get_an_li_lei_xing_select(),
this.get_xiang_mu_lei_xing_select(),
this.get_wen_ti_lei_xing_select(),
this.get_wen_ti_deng_ji_select(),
]).then((res2) => {
res.data.records.map((item) => {
let result1 = res2[0].find(
(item2) => item2.value == item.caseType,
)
let result2 = res2[1].find(
(item2) => item2.value == item.projectType,
)
let result3 = res2[2].find(
(item2) => item2.value == item.problemType,
)
let result4 = res2[3].find(
(item2) => item2.value == item.problemLevel,
)
item['caseType_'] = result1 ? result1.label : ''
item['projectType_'] = result2 ? result2.label : ''
item['problemType_'] = result3 ? result3.label : ''
item['problemLevel_'] = result4 ? result4.label : ''
})
this.pager.current = res.data.current
this.pager.total = res.data.total
this.pager.size = res.data.size
this.tableData = res.data.records
})
}
})
},
// 重置
reset() {
this.searchParams = {
caseName: '',
caseType: '',
problemType: '',
}
},
// 所有操作
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
} 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)
}
})
}
} 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(() => {})
}
},
// 新建清空表单
resetForm() {
this.formData = {
caseName: '',
caseType: '',
prjType: '',
buildContent: '',
problemType: '',
problemLevel: '',
problemContent: '',
archiDetail: '',
}
},
exportFile() {
//导出
getTypicalExampleExcel(this.searchParams).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()
})
},
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 -
90 +
'px'
},
selectable(row) {
//表格勾选框禁用
if (row.state == 1) {
return false // 禁用
} else {
return true //不禁用
}
},
// 表格多选
handleSelectionChange(e) {
this.selectList = e
},
// 每页条数改变
handleSizeChange(val) {
this.pager.current = 1
this.pager.size = val
this.getList()
},
//当前页码改变
handleCurrentChange(val) {
this.pager.current = val
this.getList()
},
},
}
</script>
<style>
.confirmClass {
background-color: #0d867f !important;
}
.el-message-box__content {
padding: 60px 15px 60px 15px;
}
</style>
<style lang="scss" scoped>
.typicalExampleRelativeUse {
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: 14px;
margin-bottom: 14px;
}
.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>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!