<template>
|
<basic-container>
|
<avue-crud
|
ref="useCrud"
|
:data="data"
|
:option="option"
|
:page.sync="page"
|
:table-loading="loading"
|
@selection-change="selectChange"
|
@row-click="rowClickHandler"
|
@refresh-change="handleRefresh"
|
@size-change="sizeChange"
|
@current-change="currentChange"
|
>
|
<template slot="menuLeft">
|
<el-button v-if="permissionList.addBtn" icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
|
</el-button>
|
<el-button v-if="permissionList.delBtn" icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除
|
</el-button>
|
<el-button v-if="permissionList.importBtn" icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
|
</el-button>
|
<el-button v-if="permissionList.exportBtn" icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
|
</el-button>
|
<el-button v-if="permissionList.viewTheScopeBtn" icon="el-icon-view" plain size="small" type="primary" @click="checkViewClickHandler">查看使用范围
|
</el-button>
|
</template>
|
|
<template slot="menu" slot-scope="{row,index}">
|
<el-button v-if="permissionList.editBtn" icon="el-icon-edit" plain size="small" type="text" @click="editClickHandler(row)">修改
|
</el-button>
|
<el-button v-if="permissionList.delBtn" icon="el-icon-delete" plain size="small" type="text" @click="delRowClickHandler(row)">删除
|
</el-button>
|
</template>
|
|
<template #icon="{ row }">
|
<span v-html="svgHtml(row.imagePath )"></span>
|
</template>
|
</avue-crud>
|
|
<!-- 新增 修改 -->
|
<el-dialog
|
v-dialogDrag
|
:title="dialogTitle === 'add' ? '创建' : '修改'"
|
:visible.sync="visible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="500px"
|
@close="visibleCloseHandler"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="名称：" prop="id">
|
<el-input v-model="form.id"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="标签：" prop="name">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="图标：" prop="imagePath">
|
<input-icon v-model="form.imagePath" placeholder="请选择图标">
|
</input-icon>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="描述：" prop="description">
|
<el-input v-model="form.description" :rows="2" type="textarea"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" type="primary" @click="addSaveHandler">确 定</el-button>
|
<el-button size="small" @click="visibleCloseHandler">取 消</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 导入 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入"
|
@updata="getList"></upload-file>
|
|
<!-- 查看使用范围 -->
|
<el-dialog
|
v-dialogDrag
|
:visible.sync="checkViewVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="查看使用范围"
|
width="60%"
|
>
|
<avue-crud
|
ref="checkViewCrud"
|
:data="checkViewData"
|
:option="checkViewOption"
|
:table-loading="checkViewLoading"
|
@search-change="checkHandleSearch"
|
@search-reset="checkHandleReset"
|
>
|
</avue-crud>
|
</el-dialog>
|
</basic-container>
|
</template>
|
|
<script>
|
import {gridStatus, addSave, editSave, deleteStatus, exportStatus, listUsed} from "@/api/modeling/statusPool/api";
|
import func from "@/util/func";
|
import basicOption from "@/util/basic-option";
|
import iconList from "@/config/iconList";
|
import {mapGetters} from "vuex";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
iconList: iconList,
|
loading: false,
|
data: [],
|
option: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
calcHeight: -60,
|
column: [
|
{
|
label: '名称',
|
prop: 'id',
|
sortable: true,
|
},
|
{
|
label: '图标',
|
prop: 'icon'
|
},
|
{
|
label: '标签',
|
prop: 'name',
|
sortable: true,
|
},
|
{
|
label: '描述',
|
prop: 'description',
|
},
|
]
|
},
|
checkViewVisible: false,
|
checkViewData: [],
|
checkViewDataSearch: [],
|
checkViewLoading: false,
|
checkViewOption: {
|
...basicOption,
|
addBtn: false,
|
menu: false,
|
searchMenuSpan: 8,
|
refreshBtn: false,
|
selection: false,
|
header:false,
|
column: [
|
{
|
label: '名称',
|
prop: 'TreeId',
|
sortable: true,
|
},
|
{
|
label: '来源',
|
prop: 'name',
|
sortable: true,
|
search: true
|
},
|
{
|
label: '说明',
|
prop: 'description',
|
}
|
]
|
},
|
tipList: [
|
"请注意名称不能为空",
|
],
|
upFileType: ['xls', 'xlsx'],
|
fileUrl: 'api/statusController/importStatus',
|
dialogTitle: '',
|
form: {
|
id: "",
|
name: "",
|
description: ""
|
},
|
rules: {
|
id: [
|
{required: true, message: '请输入名称', trigger: 'blur'},
|
]
|
},
|
visible: false,
|
selectList: [],
|
lastIndex: null,
|
page: {
|
currentPage: 1,
|
pageSize: 15,
|
total: 0,
|
pageSizes: [15, 30, 50, 100],
|
},
|
}
|
},
|
computed:{
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
|
delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
|
editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
|
exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
|
importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
|
viewTheScopeBtn: this.vaildData(this.permission[this.$route.query.id].viewTheScope, false),
|
};
|
},
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
svgHtml(svgName){
|
return func.getSVGByName(svgName);
|
},
|
getList() {
|
gridStatus(this.page.currentPage, this.page.pageSize).then(res => {
|
const data = res.data.data;
|
this.data = data;
|
this.page.total = res.data.total;
|
this.loading = false;
|
});
|
},
|
|
// 表格刷新
|
handleRefresh() {
|
this.getList();
|
},
|
|
// 表格多选
|
selectChange(row) {
|
this.selectList = row;
|
},
|
|
// 条数
|
sizeChange(val) {
|
this.page.pageSize = val;
|
this.getList();
|
},
|
|
// 页码
|
currentChange(val) {
|
this.page.currentPage = val;
|
this.getList();
|
},
|
|
// 行单选
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.useCrud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [];
|
}
|
);
|
},
|
|
// 创建按钮
|
addClickHandler() {
|
this.visible = true;
|
this.dialogTitle = 'add';
|
},
|
|
// 编辑按钮
|
editClickHandler(row) {
|
this.visible = true;
|
this.dialogTitle = 'edit';
|
this.form = {...row};
|
},
|
|
// 删除
|
delClickHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.loading = true;
|
deleteStatus(this.selectList).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 行单个删除
|
delRowClickHandler(row) {
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const list = [row];
|
this.loading = true;
|
deleteStatus(list).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 关闭对话框
|
visibleCloseHandler() {
|
const form = {
|
id: "",
|
name: "",
|
imagePath: "",
|
description: ""
|
}
|
this.form = form;
|
this.visible = false;
|
this.$refs.form.clearValidate();
|
},
|
|
// 创建或编辑保存
|
addSaveHandler() {
|
const saveFunction = this.dialogTitle === 'add' ? addSave : editSave;
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
saveFunction(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.loading = true;
|
this.getList();
|
this.visible = false;
|
} else {
|
this.$message.error(res.data.obj);
|
}
|
})
|
} else {
|
return false;
|
}
|
});
|
},
|
|
// 导出
|
exportClickHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
|
exportStatus({statusOids: this.selectList.map(item => item.oid).join(',')}).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
},
|
|
// 导入
|
uploadClickHandler() {
|
this.$refs.upload.visible = true;
|
},
|
|
// 查看使用范围
|
checkViewClickHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
|
if (this.selectList.length > 1) {
|
this.$message.error('只能选择一条数据！');
|
return;
|
}
|
listUsed({oid: this.selectList[0].oid}).then(res => {
|
if (res.data.code === 200) {
|
this.checkViewVisible = true;
|
const data = res.data.data;
|
data.forEach(item => {
|
item.name = item.id + `( ${item.name} )`;
|
item.TreeId = this.selectList[0].oid;
|
})
|
this.checkViewData = res.data.data;
|
this.checkViewDataSearch = res.data.data;
|
}
|
})
|
},
|
// 查看使用范围查询
|
checkHandleSearch(params, done) {
|
const {name} = params;
|
|
if (!params.name) {
|
this.checkViewData = this.checkViewDataSearch;
|
return done();
|
}
|
|
this.checkViewData = this.checkViewData.filter(item => {
|
return item.name && item.name.includes(name);
|
});
|
|
done();
|
|
},
|
|
// 查看使用范围重置
|
checkHandleReset() {
|
this.checkViewData = this.checkViewDataSearch;
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
|
}
|
|
.upload-demo {
|
margin-left: 20px;
|
}
|
|
</style>
|
