Commit aebf0171 authored by 骆瑛's avatar 骆瑛

修改字典项

parent 2b147d97
import api from '@/plugins/request'
const u=(path)=>`${systemUrl}/Dictionary/${path}`
export default {
getChildren(id) {
return api.get(u("GetChildren"), { id })
},
getTree(){
return api.get(u('GetTree'))
},
setColor(paras) {
return api.post(u("SetColor"), {Dictionary:paras})
},
setSort(paras) {
return api.post(u("SetSort"), paras)
},
save(paras) {
return api.post(u("CreateOrUpdate"), {Dictionary:paras})
},
}
\ No newline at end of file
import api from '@/plugins/request'
const u = (path) => `${systemUrl}/Dictionary/${path}`
export default {
getChildren(id) {
return api.get(u("GetChildren"), { id })
},
getTree() {
return api.get(u('GetTree'))
},
setColor(paras) {
return api.post(u("SetColor"), { Dictionary: paras })
},
setSort(paras) {
return api.post(u("SetSort"), paras)
},
save(paras) {
return api.post(u("CreateOrUpdate"), { Dictionary: paras })
},
careatTeams(paras) {
return api.post(u("createanditem"), paras)
},
}
\ No newline at end of file
import api from '@/plugins/request'
const u = (path) => `${systemUrl}/Dictionary/${path}`
export default {
getChildren(id) {
return api.get(u("GetChildren"), { id })
},
getTree() {
return api.get(u('GetTree'))
},
setColor(paras) {
return api.post(u("SetColor"), { Dictionary: paras })
},
setSort(paras) {
return api.post(u("SetSort"), paras)
},
save(paras) {
return api.post(u("CreateOrUpdate"), { Dictionary: paras })
},
careatTeams(paras) {
return api.post(u("createanditem"), paras)
},
getallanditems() {
return api.get(u('getallanditems'))
},
}
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event, row, index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon :type="row.icon" @on-change="setColor($event, row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, row, i) {
console.log(col, row, i)
let r = await api.setColor({ id: row.id, color: col });
if (r.success) {
this.$Message.success("颜色设置成功!");
this.$set(this.entity.items,i,row)
} else {
this.$Message.error("颜色设置失败!");
row.color = "";
}
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event, row, index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon :type="row.icon" @on-change="changeName( row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
// async setColor(col, row, i) {
// console.log(col, row, i)
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
// this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
// },
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event, row, index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon :type="row.icon" @on-change="changeName( row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
// async setColor(col, row, i) {
// console.log(col, row, i)
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
// this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
// },
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event, row, index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon :type="row.icon" @on-change="changeName( row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
// async setColor(col, row, i) {
// console.log(col, row, i)
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
// this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
// },
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event, row, index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon :type="row.icon" @on-change="changeName( row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
console.log(row,index)
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
// async setColor(col, row, i) {
// console.log(col, row, i)
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
// this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
// },
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="changeName(row,index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon :type="row.icon" @on-change="setColor($event, row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
// async setColor(col, row, i) {
// console.log(col, row, i)
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
// this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
// },
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="changeName(row,index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon :type="row.icon" @on-change="setColor($event, row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
// async setColor(col, row, i) {
// console.log(col, row, i)
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
// this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
// },
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="changeName(row,index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
// async setColor(col, row, i) {
// console.log(col, row, i)
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
// this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
// },
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,row,index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
// async setColor(col, row, i) {
// console.log(col, row, i)
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
// this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
// },
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,row,index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, row, index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, row, i) {
console.log(col, row, i)
this.entity.items[i].color=col;
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,'color',index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, 'icon', index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, row, i) {
console.log(col, row, i)
this.entity.items[i].color=col;
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,'color',index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, 'icon', index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, name, i) {
console.log(col, name, i)
if(name=='color'){
this.entity.items[i].color=col;
}else{
this.entity.items[i].icon=col;
}
// let r = await api.setColor({ id: row.id, color: col });
// if (r.success) {
// this.$Message.success("颜色设置成功!");
this.$set(this.entity.items,i,row)
// } else {
// this.$Message.error("颜色设置失败!");
// row.color = "";
// }
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,'color',index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, 'icon', index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, name, i) {
console.log(col, name, i)
if(name=='color'){
this.entity.items[i].color=col;
}else{
this.entity.items[i].icon=col;
}
this.$set(this.entity.items,i,row)
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,'color',index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, 'icon', index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, name, i) {
console.log(col, name, i)
if(name=='color'){
this.entity.items[i].color=col;
}else{
this.entity.items[i].icon=col;
}
this.$set(this.entity.items,i,row)
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,'color',index)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, 'icon', index)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, name, i) {
console.log(col, name, i)
if(name=='color'){
this.entity.items[i].color=col;
}else{
this.entity.items[i].icon=col;
}
this.$set(this.entity.items,i,row)
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,'color',index,row)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, 'icon', index,row)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, name, i,row) {
console.log(col, name, i)
if(name=='color'){
this.entity.items[i].color=col;
}else{
this.entity.items[i].icon=col;
}
this.$set(this.entity.items,i,row)
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<!-- <Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row> -->
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker
v-model="entity.color"
slot="prepend"
transfer
size="small"
transfer
recommend
/>
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<!-- <Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row> -->
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<!-- <FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row> -->
<Table border :columns="columns" :data="entity.items" class="tableCommon">
<template slot-scope="{ row, index }" slot="typeId">
<state
code="system.dictionary.typeId"
type="text"
:value="row.typeId"
></state>
</template>
<!-- <template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template> -->
<!-- <template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template> -->
<template slot-scope="{ row, index }" slot="name">
<!-- <span v-if="edit != index" v-text="row.name"></span> -->
<Input type="text" v-model.trim="row.name" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="color">
<div >
<ColorPicker
:value="row.color || ''"
transfer
recommend
@on-change="setColor($event,'color',index,row)"
/>
</div>
<!-- <div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div> -->
</template>
<template slot-scope="{ row, index }" slot="icon">
<!-- v-if="row.icon" -->
<div >
<Icon :type="row.icon" @on-change="setColor($event, 'icon', index,row)" />
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<!-- <span v-if="edit != index" v-text="row.code"></span> -->
<Input type="text" v-model.trim="row.code" @on-blur="changeName(row,index)"/>
</template>
<template slot-scope="{ row, index }" slot="action">
<div class="action">
<!-- <op class="edit" @click="save">保存</op> -->
<op class="remove" @click="remove( row, index)">删除</op>
</div>
</template>
</Table>
<Button type="primary" long @click="addTable" class="mt10">添加</Button>
<FormItem class="tr mt10">
<Button type="primary" @click="handleSubmit" v-noClick>保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import api from "../api.js";
export default {
name: "Add",
data() {
return {
edit: -1,
cur: null,
entity: {
upId: 0,
typeId: this.v.typeId,
status: 0,
isStatic: 0,
priority: 0,
color: "",
items:[]
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }],
},
items: [],
columns: [
{
type: "index",
width: 60,
align: "center",
},
{
title: "类别",
key: "typeId",
// width: 100,
align: "center",
slot: "typeId",
},
{
title: "颜色",
key: "color",
// width: 100,
align: "center",
slot: "color",
},
{
title: "名称",
key: "name",
width: 150,
slot: "name",
},
{
title: "编码",
key: "code",
slot: "code",
},
{
title: "图标",
key: "icon",
slot: "icon",
},
// {
// title: "描述",
// key: "description",
// },
// {
// title: "状态",
// key: "status",
// width: 100,
// align: "center",
// slot: "status",
// },
// {
// title: "锁定",
// key: "isStatic",
// width: 100,
// align: "center",
// slot: "isStatic",
// },
{
title: "操作",
key: "action",
width: 160,
align: "center",
slot: "action",
},
],
editModal: false,
};
},
props: ["v"],
mounted() {
if (this.v.id) {
this.entity.typeId = this.v.typeId + 1;
this.entity.upId = this.v.id;
}
},
methods: {
changeName(row,index){
this.$set( this.entity.items,index,row)
},
addTable() {
// this.edit = this.entity.items.length;
let cur = {
upId: this.v.id,
name: "",
code: "",
color: "",
status: 0,
isStatic: 0,
typeId: this.v.typeId + 1,
priority: this.edit,
};
this.entity.items.push(cur);
console.log( this.entity)
},
remove() {
// this.edit = -1;
this.entity.items.pop();
},
// save() {
// console.log()
// if (this.cur.name == "") {
// this.$Message.error("名称不能为空");
// return;
// }
// if (this.cur.code == "") {
// this.$Message.error("值不能为空");
// return;
// }
// api.save(this.cur).then((r) => {
// if (r.success) {
// this.$Message.success("添加成功");
// this.load();
// }
// });
// },
async load() {
// this.edit = -1;
let r = await api.getChildren(this.v.id);
console.log("返回值",r.result)
this.items = r.result;
},
async setColor(col, name, i,row) {debugger
console.log(col, name, i)
if(name=='color'){
this.entity.items[i].color=col;
}else{
this.entity.items[i].icon=col;
}
console.log("items", this.entity.items)
this.$set(this.entity.items,i,row)
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
api.save(this.entity).then((r) => {
console.warn(r);
if (r.success) {
this.$Message.success("添加成功");
this.$emit("on-ok");
}
});
}
});
},
handleClose() {
this.$emit("on-close");
},
},
watch: {},
};
</script>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment