338 lines
9.0 KiB
Vue
338 lines
9.0 KiB
Vue
<template>
|
|
<div class="prodcut-cmd-wrap">
|
|
<el-row v-if="isOption" :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button icon="el-icon-plus" size="mini" type="primary" @click="handleAdd">新增</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-table v-loading="loading" :data="cmdList" height="300px">
|
|
<el-table-column align="center" label="序号" type="index" width="55" />
|
|
<el-table-column align="center" label="名称" prop="cmdName" />
|
|
<el-table-column align="center" label="标识符" prop="cmdKey" />
|
|
<!-- <el-table-column label="类型" align="center" width prop="cmdType">
|
|
<template slot-scope="scope">
|
|
<span v-text="cmdTypeOption[scope.row.cmdType]"></span>
|
|
</template>
|
|
</el-table-column> -->
|
|
<!-- <el-table-column label="示例" v-if="isOption" align="center" width>
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="getCmdById(scope.row)">查看</el-button>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column align="center" label="排序" prop="sort" />
|
|
<el-table-column v-if="isOption" align="center" class-name="small-padding fixed-width" label="操作" width="200">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="text" @click="handleUpdate(scope.row, scope.$index , 'update')">修改</el-button>
|
|
<!-- <el-button size="mini" type="text" @click="handleUpdate(scope.row, scope.$index , 'cope')">复制</el-button> -->
|
|
<el-button size="mini" type="text" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 添加或修改分组集对话框 -->
|
|
<div class="eldialog-wrap">
|
|
<el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="650px">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
<el-form-item label="分组名称:" prop="cmdName">
|
|
<el-input v-model="form.cmdName" placeholder="请输入名称" />
|
|
</el-form-item>
|
|
<el-form-item label="标识符:" prop="cmdKey">
|
|
<el-input v-model="form.cmdKey" :disabled="form.cmdId" placeholder="请输入标识符" />
|
|
</el-form-item>
|
|
<el-form-item label="分组类型:" prop="cmdType">
|
|
<el-select
|
|
v-model="form.cmdType"
|
|
placeholder="请选择分组类型"
|
|
style="width: 100%;"
|
|
@change="cmdTypeChange"
|
|
>
|
|
<el-option
|
|
v-for="(doce, value) in cmdTypeOption"
|
|
:key="value"
|
|
:label="doce"
|
|
:value="value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<div class="st" style="display: flex; justify-content: flex-end;">
|
|
<el-transfer
|
|
v-model="value"
|
|
:data="transferData"
|
|
:format="{
|
|
noChecked: '${total}',
|
|
hasChecked: '${checked}/${total}'
|
|
}"
|
|
:props="{
|
|
key: 'funId',
|
|
label: 'funName'
|
|
}"
|
|
:titles="['全选', '全选']"
|
|
filterable
|
|
style="text-align: left; display: inline-block"
|
|
></el-transfer>
|
|
</div>
|
|
</el-form>
|
|
<div slot="footer" class="form-button-div">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<el-dialog
|
|
:title="cmdParamTitle"
|
|
:visible.sync="paramsOpen"
|
|
class="params-eldialog"
|
|
width="800px"
|
|
>
|
|
<params-json-wrap
|
|
v-if="paramsOpen === true"
|
|
:other="{
|
|
action: '',
|
|
prodPK: sourceId,
|
|
cmdKey: selectCmdInfo.cmdKey
|
|
}"
|
|
:paramsList="paramsList"
|
|
></params-json-wrap>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ParamsJsonWrap from "./paramsJson";
|
|
import { mapGetters, mapState } from "vuex";
|
|
|
|
const cmdTypeOption = {
|
|
UP: "上报",
|
|
DOWN: "下发"
|
|
};
|
|
|
|
export default {
|
|
name: "Cmd",
|
|
props: {
|
|
sourceId: {
|
|
type: [Number, String],
|
|
default: ""
|
|
},
|
|
isOption: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
components: {
|
|
ParamsJsonWrap
|
|
},
|
|
computed: {
|
|
...mapGetters(["groupList"]),
|
|
},
|
|
data() {
|
|
return {
|
|
transferData: [],
|
|
value: [],
|
|
renderFunc(h, option) {
|
|
return (
|
|
<span>
|
|
{option.funId} - {option.funName}
|
|
</span>
|
|
);
|
|
},
|
|
paramsOpen: false,
|
|
cmdTypeOption,
|
|
// 遮罩层
|
|
loading: false,
|
|
cmdParamTitle: "",
|
|
// 选中数组
|
|
ids: [],
|
|
// 非单个禁用
|
|
single: true,
|
|
// 非多个禁用
|
|
multiple: true,
|
|
// 总条数
|
|
total: 0,
|
|
// 分组集表格数据
|
|
cmdList: [],
|
|
// 弹出层标题
|
|
title: "",
|
|
// 是否显示弹出层
|
|
open: false,
|
|
// 查询参数
|
|
// queryParams: {
|
|
// cmdName: undefined,
|
|
// cmdKey: undefined,
|
|
// sourceId: undefined
|
|
// },
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {
|
|
cmdName: [
|
|
{ required: true, message: "分组名称不能为空", trigger: "blur" }
|
|
],
|
|
cmdKey: [
|
|
{ required: true, message: "标识符不能为空", trigger: "blur" }
|
|
],
|
|
cmdType: [
|
|
{ required: true, message: "分组类型不能为空", trigger: "blur" }
|
|
]
|
|
},
|
|
paramsList: [],
|
|
selectCmdInfo: {}
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.getList();
|
|
},
|
|
cmdTypeChange(val) {
|
|
this.transferData = [];
|
|
this.value = [];
|
|
// 做属性 数据赛选
|
|
},
|
|
/** 查询分组集列表 */
|
|
getList() {
|
|
this.loading = true
|
|
this.cmdList = []
|
|
setTimeout(() => {
|
|
this.$store.dispatch("GetGroupList").then((res) => {
|
|
this.cmdList = res
|
|
this.$forceUpdate()
|
|
this.loading = false
|
|
});
|
|
}, 50)
|
|
|
|
},
|
|
/** 查询分组集列表 */
|
|
setList(list) {
|
|
this.loading = true
|
|
this.cmdList = []
|
|
setTimeout(() => {
|
|
this.cmdList = list
|
|
this.$forceUpdate()
|
|
this.loading = false
|
|
}, 50)
|
|
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
cmdId: undefined,
|
|
cmdName: undefined,
|
|
cmdKey: undefined,
|
|
cmdType: undefined,
|
|
sourceId: this.sourceId,
|
|
mainId: undefined
|
|
};
|
|
this.resetForm("form");
|
|
},
|
|
/** 新增按钮操作 */
|
|
handleAdd() {
|
|
this.$emit('handleClick', { type: 'add', idx: 0 })
|
|
},
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row, idx, type) {
|
|
this.$emit('handleClick', { 'type': type, 'idx': idx })
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm: function() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
this.form.sdFunIds = this.value;
|
|
// 新增或者修改都将数据添加到现有list 中
|
|
}
|
|
});
|
|
},
|
|
/** 删除按钮操作 */
|
|
handleDelete(row, idx) {
|
|
var that = this
|
|
this.$confirm(
|
|
// '是否确认删除分组集编号为"' + cmdIds + '"的数据项?',
|
|
"是否删除该选项",
|
|
"警告",
|
|
{
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
}
|
|
)
|
|
.then(function() {
|
|
// 执行删除数据
|
|
that.$store.dispatch('DeleteGroup', idx)
|
|
that.$emit('handleClick', { 'type': 'list' })
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.prodcut-cmd-wrap {
|
|
.eldialog-wrap {
|
|
.el-dialog__header {
|
|
|
|
}
|
|
.el-dialog__body {
|
|
padding: 0;
|
|
}
|
|
.el-form {
|
|
padding: 20px;
|
|
}
|
|
.el-dialog__footer {
|
|
padding: 0;
|
|
}
|
|
.form-button-div {
|
|
// margin-top: 20px;
|
|
height: 60px;
|
|
border-top: 1px solid #747373;
|
|
text-align: right;
|
|
width: 100%;
|
|
padding-top: 15px;
|
|
|
|
.el-button + .el-button {
|
|
margin-right: 10px;
|
|
}
|
|
.el-button {
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
.params-eldialog {
|
|
.el-dialog__header {
|
|
|
|
}
|
|
.el-dialog__body {
|
|
height: 100%;
|
|
max-height: calc(100vh - 200px);
|
|
overflow: auto;
|
|
padding: 20px 5px;
|
|
}
|
|
}
|
|
}
|
|
.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar {
|
|
/*滚动条整体样式*/
|
|
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
height: 5px;
|
|
}
|
|
.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-thumb {
|
|
/*滚动条里面小方块*/
|
|
border-radius: 10px;
|
|
box-shadow: inset 0 0 5px #c4c4c4;
|
|
background: #dededea6;
|
|
}
|
|
.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-track {
|
|
/*滚动条里面轨道*/
|
|
box-shadow: inset 0 0 5px #f6f6f6;
|
|
border-radius: 10px;
|
|
background: #ffffff;
|
|
}
|
|
</style>
|