207 lines
4.8 KiB
Vue
207 lines
4.8 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<obj-modal
|
||
|
|
ref="modal"
|
||
|
|
labelWidth="150px"
|
||
|
|
:modalCols="modalCols"
|
||
|
|
:modalConfig="modalConfig"
|
||
|
|
:modalData="modalData"
|
||
|
|
:modalHandles="modalHandles"
|
||
|
|
>
|
||
|
|
<template slot="dialog__after"> </template>
|
||
|
|
</obj-modal>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { debounce, cloneDeep } from "lodash";
|
||
|
|
import { Divider } from "element-ui";
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isAdd: true,
|
||
|
|
//表格属性
|
||
|
|
modalConfig: {
|
||
|
|
title: "",
|
||
|
|
show: false,
|
||
|
|
width: "700px",
|
||
|
|
},
|
||
|
|
modalData: {},
|
||
|
|
settingId: "",
|
||
|
|
form: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
"modalConfig.show"(newVal) {
|
||
|
|
if (!newVal) {
|
||
|
|
//关闭弹窗清空校验
|
||
|
|
setTimeout(() => {
|
||
|
|
this.$refs.modal.resetFields();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
queryTableData(pageNo, pageSize) {},
|
||
|
|
toggle(e) {
|
||
|
|
if (this.modalConfig.show == false) {
|
||
|
|
this.modalConfig.show = true;
|
||
|
|
} else {
|
||
|
|
this.modalConfig.show = false;
|
||
|
|
}
|
||
|
|
if (e) {
|
||
|
|
this.init(cloneDeep(e));
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
add: (row) => {
|
||
|
|
console.log(row);
|
||
|
|
this.modalData = {
|
||
|
|
targetId: row.targetId,
|
||
|
|
title: "",
|
||
|
|
position: row.position,
|
||
|
|
type: 0,
|
||
|
|
status: true,
|
||
|
|
app: 1,
|
||
|
|
};
|
||
|
|
this.fileList = [];
|
||
|
|
this.modalConfig.title = "添加角色";
|
||
|
|
this.isAdd = true;
|
||
|
|
},
|
||
|
|
update: () => {
|
||
|
|
this.modalConfig.title = "编辑角色";
|
||
|
|
this.isAdd = false;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
init(row) {
|
||
|
|
this.modalData = row;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
modalCols() {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
label: "角色名称",
|
||
|
|
prop: "name",
|
||
|
|
type: "Input",
|
||
|
|
required: true,
|
||
|
|
rules: {
|
||
|
|
required: true,
|
||
|
|
message: "请输入角色名称",
|
||
|
|
trigger: "blur",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "角色编码",
|
||
|
|
prop: "roleCode",
|
||
|
|
type: "Input",
|
||
|
|
required: true,
|
||
|
|
rules: {
|
||
|
|
required: true,
|
||
|
|
message: "请输入角色编码",
|
||
|
|
trigger: "blur",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "权限字段",
|
||
|
|
prop: "col",
|
||
|
|
type: "Input",
|
||
|
|
required: true,
|
||
|
|
rules: {
|
||
|
|
required: true,
|
||
|
|
message: "请输入权限字段",
|
||
|
|
trigger: "blur",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "数据范围",
|
||
|
|
prop: "range",
|
||
|
|
maxlength: "30",
|
||
|
|
rules: {
|
||
|
|
required: true,
|
||
|
|
message: "请选择数据范围",
|
||
|
|
trigger: "blur",
|
||
|
|
},
|
||
|
|
type: "jsx",
|
||
|
|
render: () => {
|
||
|
|
return (
|
||
|
|
<el-select
|
||
|
|
v-model={this.modalData.range}
|
||
|
|
placeholder="请选择销售单位"
|
||
|
|
>
|
||
|
|
{[
|
||
|
|
{
|
||
|
|
label: "仅本级",
|
||
|
|
value: "eq",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "本级及以下",
|
||
|
|
value: "in",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "全部",
|
||
|
|
value: "all",
|
||
|
|
},
|
||
|
|
].map((item) => {
|
||
|
|
return (
|
||
|
|
<el-option
|
||
|
|
label={item.label}
|
||
|
|
value={item.value}
|
||
|
|
></el-option>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</el-select>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "备注",
|
||
|
|
prop: "remark",
|
||
|
|
type: "Textarea",
|
||
|
|
required: true,
|
||
|
|
maxlength: "120",
|
||
|
|
rows: "5",
|
||
|
|
rules: {
|
||
|
|
required: true,
|
||
|
|
message: "请输入备注内容",
|
||
|
|
trigger: "blur",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
},
|
||
|
|
modalHandles() {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
label: "取消",
|
||
|
|
handle: () => {
|
||
|
|
this.toggle();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "确认",
|
||
|
|
type: "primary",
|
||
|
|
submit: true,
|
||
|
|
handle: () => {
|
||
|
|
console.log(this.modalData);
|
||
|
|
this.toggle();
|
||
|
|
// if (this.isAdd) {
|
||
|
|
// this.$api.mer_admin.noticeAdd(this.modalData).then((res) => {
|
||
|
|
// this.toggle();
|
||
|
|
// this.$emit("queryList");
|
||
|
|
// });
|
||
|
|
// } else {
|
||
|
|
// this.$api.mer_admin.noticeUpdate(this.modalData).then((res) => {
|
||
|
|
// this.toggle();
|
||
|
|
// this.$emit("queryList");
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
asyncComputed: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
</style>
|