parent
7df416ca96
commit
1f7fd298f6
@ -0,0 +1,278 @@
|
||||
<script>
|
||||
import { save, show, index, destroy } from "@/api/system/baseForm";
|
||||
import { CreateDialog } from "@/utils/createDialog"
|
||||
import { deepCopy } from "@/utils";
|
||||
import { resolveFormInfo } from '@/utils/createTable'
|
||||
export default {
|
||||
props: {
|
||||
tableName: String,
|
||||
treeData: Array,
|
||||
},
|
||||
render(h) {
|
||||
let dialog = new CreateDialog(this,[
|
||||
{
|
||||
key: 'system_catalogue_id',
|
||||
label: '目录',
|
||||
render: h('el-cascader',{
|
||||
key: this.cascaderId,
|
||||
style: {
|
||||
'width': '100%'
|
||||
},
|
||||
props: {
|
||||
value: this.form.system_catalogue_id,
|
||||
showAllLevels: false,
|
||||
options: this.treeData,
|
||||
props: { value:'id', label:'name',checkStrictly:true }
|
||||
},
|
||||
on: {
|
||||
change:e => {
|
||||
if(e.length > 0){
|
||||
this.form.system_catalogue_id = e.at(-1)
|
||||
}else{
|
||||
this.form.system_catalogue_id = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
],{
|
||||
width: "650px"
|
||||
})
|
||||
return dialog.render()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cascaderId: 1,
|
||||
columns: 1,
|
||||
row: {},
|
||||
formInfo: [],
|
||||
id: "",
|
||||
type: "add",
|
||||
dialogVisible: false,
|
||||
form: {},
|
||||
originalForm: {},
|
||||
rules: {},
|
||||
file: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setRow (row) {
|
||||
this.row = row
|
||||
},
|
||||
init() {
|
||||
for (let key in this.form) {
|
||||
if (this.form[key] instanceof Array) {
|
||||
this.form[key] = [];
|
||||
} else {
|
||||
this.form[key] = "";
|
||||
}
|
||||
}
|
||||
this.$refs["elForm"].clearValidate();
|
||||
},
|
||||
show() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
hidden() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
setType(type = "add") {
|
||||
let types = ["add", "editor", "show"];
|
||||
if (types.includes(type)) {
|
||||
this.type = type;
|
||||
} else {
|
||||
console.warn("Unknown type: " + type);
|
||||
}
|
||||
},
|
||||
setId(id) {
|
||||
if (typeof id == "number") {
|
||||
this.id = id;
|
||||
} else {
|
||||
console.error("error typeof id: " + typeof id);
|
||||
}
|
||||
},
|
||||
|
||||
async getDetail() {
|
||||
const res = await show({ id: this.id, table_name: this.tableName });
|
||||
this.$integrateData(this.form, res);
|
||||
|
||||
this.formInfo.forEach((i) => {
|
||||
if (i && (i.edit_input === "file" || i.edit_input === "files")) {
|
||||
res[i._relations.link_with_name]
|
||||
? (this.file[i.field] =
|
||||
res[i._relations.link_with_name] instanceof Array
|
||||
? res[i._relations.link_with_name].map((i) => {
|
||||
return {
|
||||
name: i?.name,
|
||||
url: i?.url,
|
||||
response: i,
|
||||
};
|
||||
})
|
||||
: [
|
||||
{
|
||||
name: res[i._relations.link_with_name]?.name,
|
||||
url: res[i._relations.link_with_name]?.url,
|
||||
response: res[i._relations.link_with_name],
|
||||
},
|
||||
])
|
||||
: (this.file[i.field] = []);
|
||||
}
|
||||
|
||||
this.form = Object.assign({}, this.form);
|
||||
this.originalForm = deepCopy(res);
|
||||
});
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (this.type === "add") {
|
||||
if (this.form.hasOwnProperty("id")) {
|
||||
delete this.form.id;
|
||||
}
|
||||
}
|
||||
if (this.type === "editor") {
|
||||
Object.defineProperty(this.form, "id", {
|
||||
value: this.id,
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
writable: true,
|
||||
});
|
||||
}
|
||||
let promiseAll = []
|
||||
this.formInfo.forEach((info) => {
|
||||
if (
|
||||
info._relations?.link_relation === "newHasMany" ||
|
||||
info._relations?.link_relation === "hasMany"
|
||||
) {
|
||||
if (this.originalForm[info._relations.link_with_name]) {
|
||||
this.originalForm[info._relations.link_with_name].map((i) => {
|
||||
promiseAll.push(
|
||||
destroy({
|
||||
id: i.id,
|
||||
table_name: info._relations.link_table_name,
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
info._relations?.link_relation === "newHasMany" ||
|
||||
info._relations?.link_relation === "hasMany"
|
||||
) {
|
||||
if (info.edit_input === "files") {
|
||||
this.form[info._relations.link_with_name] = this.file[
|
||||
info.field
|
||||
]?.map((i) => {
|
||||
let copyRelation = i?.response ? deepCopy(i?.response) : "";
|
||||
delete copyRelation.id;
|
||||
return {
|
||||
file_id: i?.response?.id,
|
||||
...copyRelation,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
save(Object.assign(this.form, { table_name: this.tableName })).then(res => {
|
||||
this.$Message.success({
|
||||
content: `${this.type === "add" ? "新增" : "编辑"}成功`,
|
||||
});
|
||||
this.$emit("refresh");
|
||||
this.hidden();
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
title () {
|
||||
if (this.type === 'add') return '新增'
|
||||
if (this.type === 'editor') return '编辑'
|
||||
if (this.type === 'show') return '查看'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formInfo: {
|
||||
handler: function (newVal) {
|
||||
this.form = {};
|
||||
this.rules = {};
|
||||
this.file = {};
|
||||
newVal.forEach((i) => {
|
||||
if (i.field) {
|
||||
this.form[i.field] = "";
|
||||
if (
|
||||
i.validation instanceof Array &&
|
||||
i.validation.length > 0 &&
|
||||
!!i.validation.find((i) => i === "required")
|
||||
) {
|
||||
this.rules[i.field] = [
|
||||
{ required: true, message: `请填写${i.name}` },
|
||||
];
|
||||
}
|
||||
if (i.edit_input === "files") {
|
||||
this.form[i.field] = [];
|
||||
}
|
||||
if (i.edit_input === "files" || i.edit_input === "file") {
|
||||
this.file[i.field] = [];
|
||||
}
|
||||
if (i.edit_input === "checkbox") {
|
||||
this.form[i.field] = [];
|
||||
}
|
||||
if (i._relations) {
|
||||
this.form[i._relations?.link_with_name] = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.columns = newVal.length > 11 ? '2' : '1'
|
||||
},
|
||||
//immediate: true,
|
||||
},
|
||||
dialogVisible(val) {
|
||||
if (val) {
|
||||
document.documentElement.style.setProperty(
|
||||
"--column-num",
|
||||
this.columns
|
||||
);
|
||||
if (this.type === "editor" || this.type === "show") {
|
||||
this.$nextTick(() => this.getDetail());
|
||||
}
|
||||
} else {
|
||||
this.id = "";
|
||||
this.type = "";
|
||||
this.init();
|
||||
this.$refs["elForm"].clearValidate();
|
||||
delete this.form.id;
|
||||
for (let key in this.file) {
|
||||
this.file[key] = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
resolveFormInfo(24).then(res => this.formInfo = res)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--column-num: 2;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.uploaded-a {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.uploaded-a:hover {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: repeat(var(--column-num), 1fr);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,278 @@
|
||||
<script>
|
||||
import { save, show, index, destroy } from "@/api/system/baseForm";
|
||||
import { CreateDialog } from "@/utils/createDialog"
|
||||
import { deepCopy } from "@/utils";
|
||||
import { resolveFormInfo } from '@/utils/createTable'
|
||||
export default {
|
||||
props: {
|
||||
tableName: String,
|
||||
treeData: Array,
|
||||
},
|
||||
render(h) {
|
||||
let dialog = new CreateDialog(this,[
|
||||
{
|
||||
key: 'pid',
|
||||
label: '父级',
|
||||
render: h('el-cascader',{
|
||||
key: this.cascaderId,
|
||||
style: {
|
||||
'width': '100%'
|
||||
},
|
||||
props: {
|
||||
value: this.form.pid,
|
||||
showAllLevels: false,
|
||||
options: this.treeData,
|
||||
props: { value:'id', label:'name',checkStrictly:true }
|
||||
},
|
||||
on: {
|
||||
change:e => {
|
||||
if(e.length > 0){
|
||||
this.form.pid = e.at(-1)
|
||||
}else{
|
||||
this.form.pid = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
],{
|
||||
width: "500px"
|
||||
})
|
||||
return dialog.render()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cascaderId: 1,
|
||||
columns: 1,
|
||||
row: {},
|
||||
formInfo: [],
|
||||
id: "",
|
||||
type: "add",
|
||||
dialogVisible: false,
|
||||
form: {},
|
||||
originalForm: {},
|
||||
rules: {},
|
||||
file: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setRow (row) {
|
||||
this.row = row
|
||||
},
|
||||
init() {
|
||||
for (let key in this.form) {
|
||||
if (this.form[key] instanceof Array) {
|
||||
this.form[key] = [];
|
||||
} else {
|
||||
this.form[key] = "";
|
||||
}
|
||||
}
|
||||
this.$refs["elForm"].clearValidate();
|
||||
},
|
||||
show() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
hidden() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
setType(type = "add") {
|
||||
let types = ["add", "editor", "show"];
|
||||
if (types.includes(type)) {
|
||||
this.type = type;
|
||||
} else {
|
||||
console.warn("Unknown type: " + type);
|
||||
}
|
||||
},
|
||||
setId(id) {
|
||||
if (typeof id == "number") {
|
||||
this.id = id;
|
||||
} else {
|
||||
console.error("error typeof id: " + typeof id);
|
||||
}
|
||||
},
|
||||
|
||||
async getDetail() {
|
||||
const res = await show({ id: this.id, table_name: this.tableName });
|
||||
this.$integrateData(this.form, res);
|
||||
|
||||
this.formInfo.forEach((i) => {
|
||||
if (i && (i.edit_input === "file" || i.edit_input === "files")) {
|
||||
res[i._relations.link_with_name]
|
||||
? (this.file[i.field] =
|
||||
res[i._relations.link_with_name] instanceof Array
|
||||
? res[i._relations.link_with_name].map((i) => {
|
||||
return {
|
||||
name: i?.name,
|
||||
url: i?.url,
|
||||
response: i,
|
||||
};
|
||||
})
|
||||
: [
|
||||
{
|
||||
name: res[i._relations.link_with_name]?.name,
|
||||
url: res[i._relations.link_with_name]?.url,
|
||||
response: res[i._relations.link_with_name],
|
||||
},
|
||||
])
|
||||
: (this.file[i.field] = []);
|
||||
}
|
||||
|
||||
this.form = Object.assign({}, this.form);
|
||||
this.originalForm = deepCopy(res);
|
||||
});
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (this.type === "add") {
|
||||
if (this.form.hasOwnProperty("id")) {
|
||||
delete this.form.id;
|
||||
}
|
||||
}
|
||||
if (this.type === "editor") {
|
||||
Object.defineProperty(this.form, "id", {
|
||||
value: this.id,
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
writable: true,
|
||||
});
|
||||
}
|
||||
let promiseAll = []
|
||||
this.formInfo.forEach((info) => {
|
||||
if (
|
||||
info._relations?.link_relation === "newHasMany" ||
|
||||
info._relations?.link_relation === "hasMany"
|
||||
) {
|
||||
if (this.originalForm[info._relations.link_with_name]) {
|
||||
this.originalForm[info._relations.link_with_name].map((i) => {
|
||||
promiseAll.push(
|
||||
destroy({
|
||||
id: i.id,
|
||||
table_name: info._relations.link_table_name,
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
info._relations?.link_relation === "newHasMany" ||
|
||||
info._relations?.link_relation === "hasMany"
|
||||
) {
|
||||
if (info.edit_input === "files") {
|
||||
this.form[info._relations.link_with_name] = this.file[
|
||||
info.field
|
||||
]?.map((i) => {
|
||||
let copyRelation = i?.response ? deepCopy(i?.response) : "";
|
||||
delete copyRelation.id;
|
||||
return {
|
||||
file_id: i?.response?.id,
|
||||
...copyRelation,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
save(Object.assign(this.form, { table_name: this.tableName })).then(res => {
|
||||
this.$Message.success({
|
||||
content: `${this.type === "add" ? "新增" : "编辑"}成功`,
|
||||
});
|
||||
this.$emit("refresh");
|
||||
this.hidden();
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
title () {
|
||||
if (this.type === 'add') return '新增'
|
||||
if (this.type === 'editor') return '编辑'
|
||||
if (this.type === 'show') return '查看'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formInfo: {
|
||||
handler: function (newVal) {
|
||||
this.form = {};
|
||||
this.rules = {};
|
||||
this.file = {};
|
||||
newVal.forEach((i) => {
|
||||
if (i.field) {
|
||||
this.form[i.field] = "";
|
||||
if (
|
||||
i.validation instanceof Array &&
|
||||
i.validation.length > 0 &&
|
||||
!!i.validation.find((i) => i === "required")
|
||||
) {
|
||||
this.rules[i.field] = [
|
||||
{ required: true, message: `请填写${i.name}` },
|
||||
];
|
||||
}
|
||||
if (i.edit_input === "files") {
|
||||
this.form[i.field] = [];
|
||||
}
|
||||
if (i.edit_input === "files" || i.edit_input === "file") {
|
||||
this.file[i.field] = [];
|
||||
}
|
||||
if (i.edit_input === "checkbox") {
|
||||
this.form[i.field] = [];
|
||||
}
|
||||
if (i._relations) {
|
||||
this.form[i._relations?.link_with_name] = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.columns = newVal.length > 11 ? '2' : '1'
|
||||
},
|
||||
//immediate: true,
|
||||
},
|
||||
dialogVisible(val) {
|
||||
if (val) {
|
||||
document.documentElement.style.setProperty(
|
||||
"--column-num",
|
||||
this.columns
|
||||
);
|
||||
if (this.type === "editor" || this.type === "show") {
|
||||
this.$nextTick(() => this.getDetail());
|
||||
}
|
||||
} else {
|
||||
this.id = "";
|
||||
this.type = "";
|
||||
this.init();
|
||||
this.$refs["elForm"].clearValidate();
|
||||
delete this.form.id;
|
||||
for (let key in this.file) {
|
||||
this.file[key] = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
resolveFormInfo(23).then(res => this.formInfo = res)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--column-num: 2;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.uploaded-a {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.uploaded-a:hover {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: repeat(var(--column-num), 1fr);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,674 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader
|
||||
:icon="$route.meta.icon"
|
||||
:text="$route.meta.title"
|
||||
style="margin-bottom: 10px; border: 0px; margin-top: 15px"
|
||||
>
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<header-content :auths="auths_auth_mixin">
|
||||
<template #search>
|
||||
<div style="display: flex">
|
||||
<Select
|
||||
v-model="select.filter[0].key"
|
||||
style="width: 100px"
|
||||
placeholder="搜索条目"
|
||||
>
|
||||
<Option
|
||||
v-for="item in form"
|
||||
:key="item.id"
|
||||
:value="item.field"
|
||||
>{{ item.name }}</Option
|
||||
>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="select.filter[0].op"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
placeholder="搜索条件"
|
||||
>
|
||||
<Option
|
||||
v-for="item in op"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</Select>
|
||||
<template
|
||||
v-if="
|
||||
select.filter[0].op !== 'range' &&
|
||||
!columnArrTest(select.filter[0].key)
|
||||
"
|
||||
>
|
||||
<Input
|
||||
v-model="select.filter[0].value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请填写关键词"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
select.filter[0].op !== 'range' &&
|
||||
columnArrTest(select.filter[0].key)
|
||||
"
|
||||
>
|
||||
<Select
|
||||
v-model="select.filter[0].value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请选择关键词"
|
||||
>
|
||||
<Option
|
||||
v-for="item in getColumnParams(select.filter[0].key)"
|
||||
:key="item.id"
|
||||
:value="getColumnField(select.filter[0].key)._relations ? item[getColumnField(select.filter[0].key)._relations.foreign_key] : item.value"
|
||||
>{{
|
||||
item.key || item.value || item.name || item.no || item.mingcheng || item.id
|
||||
}}</Option
|
||||
>
|
||||
</Select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Input
|
||||
:value="select.filter[0].value.split(',')[0]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围开始关键词"
|
||||
@input="(e) => inputStartHandler(e, select.filter[0])"
|
||||
/>
|
||||
<span
|
||||
style="
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>至</span
|
||||
>
|
||||
<Input
|
||||
:value="select.filter[0].value.split(',')[1]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围结束关键词"
|
||||
@input="(e) => inputEndHandler(e, select.filter[0])"
|
||||
/>
|
||||
</template>
|
||||
<Button
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
@click="$refs['xyTable'].getTableData(true)"
|
||||
>查询</Button
|
||||
>
|
||||
|
||||
<xy-selectors
|
||||
style="margin-left: 10px"
|
||||
@reset="reset"
|
||||
@search="$refs['xyTable'].getTableData(true)"
|
||||
>
|
||||
<template>
|
||||
<div class="select">
|
||||
<div
|
||||
class="select__item"
|
||||
v-for="(item, index) in select.filter"
|
||||
:key="`${item.value}-${index}`"
|
||||
>
|
||||
<p>条件{{ index + 1 }}</p>
|
||||
<Select
|
||||
v-model="item.key"
|
||||
style="width: 100px"
|
||||
placeholder="搜索条目"
|
||||
>
|
||||
<Option
|
||||
v-for="item in form"
|
||||
:key="item.id"
|
||||
:value="item.field"
|
||||
>{{ item.name }}</Option
|
||||
>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="item.op"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
placeholder="搜索条件"
|
||||
>
|
||||
<Option
|
||||
v-for="item in op"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</Select>
|
||||
<template
|
||||
v-if="
|
||||
item.op !== 'range' && !columnArrTest(item.key)
|
||||
"
|
||||
>
|
||||
<Input
|
||||
v-model="item.value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请填写关键词"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
item.op !== 'range' && columnArrTest(item.key)
|
||||
"
|
||||
>
|
||||
<Select
|
||||
v-model="item.value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请选择关键词"
|
||||
>
|
||||
<Option
|
||||
v-for="item in getColumnParams(item.key)"
|
||||
:key="item.id"
|
||||
:value="getColumnField(item.key)._relations ? item[getColumnField(item.key)._relations.foreign_key] : item.value"
|
||||
>{{
|
||||
item.key || item.value || item.name || item.no || item.mingcheng || item.id
|
||||
}}</Option
|
||||
>
|
||||
</Select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Input
|
||||
:value="item.value.split(',')[0]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围开始关键词"
|
||||
@input="(e) => inputStartHandler(e, item)"
|
||||
/>
|
||||
<span style="margin-left: 10px">至</span>
|
||||
<Input
|
||||
:value="item.value.split(',')[1]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围结束关键词"
|
||||
@input="(e) => inputEndHandler(e, item)"
|
||||
/>
|
||||
</template>
|
||||
<el-button
|
||||
v-if="index !== 0"
|
||||
size="small"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
style="margin-left: 10px"
|
||||
@click="select.filter.splice(index, 1)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="
|
||||
select.filter.push({ key: '', op: '', value: '' })
|
||||
"
|
||||
></el-button>
|
||||
<span>新增一条</span>
|
||||
</div>
|
||||
</template>
|
||||
</xy-selectors>
|
||||
</div>
|
||||
</template>
|
||||
<template #create>
|
||||
<Button
|
||||
type="primary"
|
||||
@click="
|
||||
$refs['addFile'].setType('add'), $refs['addFile'].show()
|
||||
"
|
||||
>新增</Button
|
||||
>
|
||||
</template>
|
||||
<template #import>
|
||||
<Button type="primary" @click="$refs['imports'].show()"
|
||||
>导入</Button
|
||||
>
|
||||
</template>
|
||||
<template #export>
|
||||
<Button
|
||||
type="primary"
|
||||
@click="exportExcel(new Date().getTime().toString())"
|
||||
>导出</Button
|
||||
>
|
||||
</template>
|
||||
</header-content>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table
|
||||
:btn-width="300"
|
||||
:auths="auths_auth_mixin"
|
||||
:delay-req="true"
|
||||
:destroy-action="destroy"
|
||||
ref="xyTable"
|
||||
:border="true"
|
||||
:action="index"
|
||||
:req-opt="select"
|
||||
:destroy-req-opt="select"
|
||||
:table-item="table"
|
||||
@detail="
|
||||
(row) => {
|
||||
$router.push({
|
||||
path: '/assetsDetail',
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
})
|
||||
}
|
||||
"
|
||||
@editor="
|
||||
(row) => {
|
||||
$refs['addFile'].setId(row.id);
|
||||
$refs['addFile'].setType('editor');
|
||||
$refs['addFile'].show();
|
||||
}
|
||||
"
|
||||
>
|
||||
</xy-table>
|
||||
|
||||
<addFile
|
||||
:tree-data="treeList"
|
||||
:table-name="customForm.tableName"
|
||||
:form-info="form"
|
||||
ref="addFile"
|
||||
@refresh="$refs['xyTable'].getTableData()"
|
||||
>
|
||||
</addFile>
|
||||
<drawer
|
||||
:table-name="customForm.tableName"
|
||||
:form-info="form"
|
||||
ref="drawer"
|
||||
></drawer>
|
||||
<imports
|
||||
:table-name="customForm.tableName"
|
||||
:form-info="form"
|
||||
ref="imports"
|
||||
@refresh="$refs['xyTable'].getTableData()"
|
||||
></imports>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index as fieldIndex } from "@/api/system/customFormField";
|
||||
import { authMixin } from "@/mixin/authMixin";
|
||||
import { index, destroy } from "@/api/system/baseForm";
|
||||
import { op } from "@/const/op";
|
||||
import { download } from "@/utils/downloadRequest";
|
||||
import { getparameter } from "@/api/system/dictionary";
|
||||
import { show } from "@/api/system/customForm";
|
||||
import * as XLSX from "xlsx";
|
||||
import { saveAs } from "file-saver";
|
||||
import { listdept } from "@/api/system/department"
|
||||
|
||||
import addFile from "@/views/operate/component/addFile.vue";
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import headerContent from "@/components/LxHeader/XyContent.vue";
|
||||
import drawer from "@/views/component/drawer.vue";
|
||||
import imports from "@/views/component/imports.vue";
|
||||
export default {
|
||||
name: 'tableList',
|
||||
components: {
|
||||
LxHeader,
|
||||
addFile,
|
||||
headerContent,
|
||||
drawer,
|
||||
imports,
|
||||
|
||||
},
|
||||
mixins: [authMixin],
|
||||
data() {
|
||||
return {
|
||||
op,
|
||||
treeList: [],
|
||||
select: {
|
||||
table_name: "",
|
||||
filter: [
|
||||
{
|
||||
key: "",
|
||||
op: "",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
form: [],
|
||||
table: [],
|
||||
customForm: {
|
||||
customFormId: "",
|
||||
tableName: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
index,
|
||||
destroy,
|
||||
download,
|
||||
reset() {
|
||||
this.select.filter.splice(1);
|
||||
this.select.filter[0] = {
|
||||
key: "",
|
||||
op: "",
|
||||
value: "",
|
||||
};
|
||||
},
|
||||
|
||||
async exportExcel(sheetName) {
|
||||
const res = await index(
|
||||
Object.assign(this.select, { page: 1, page_size: 9999 })
|
||||
);
|
||||
if (res.data) {
|
||||
let headers = this.form.map((i) => {
|
||||
return {
|
||||
key: i.field,
|
||||
title: i.name,
|
||||
};
|
||||
});
|
||||
const data = res.data.map((row) =>
|
||||
headers.map((header) => row[header.key])
|
||||
);
|
||||
data.unshift(headers.map((header) => header.title));
|
||||
const wb = XLSX.utils.book_new();
|
||||
const ws = XLSX.utils.aoa_to_sheet(data);
|
||||
XLSX.utils.book_append_sheet(wb, ws, sheetName);
|
||||
const wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array",
|
||||
});
|
||||
saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
`${sheetName}.xlsx`
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
//target要为内存地址引用类型
|
||||
inputStartHandler(e, target) {
|
||||
let temp = target?.value.split(",")[1];
|
||||
target.value = `${e},${temp ? temp : ""}`;
|
||||
},
|
||||
inputEndHandler(e, target) {
|
||||
let temp = target?.value.split(",")[0];
|
||||
target.value = `${temp ? temp : ""},${e}`;
|
||||
},
|
||||
|
||||
async getFormDetail() {
|
||||
if (this.$route.meta.params?.custom_form) {
|
||||
let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
|
||||
try {
|
||||
let custom_form = JSON.parse(decode);
|
||||
this.customForm.customFormId = custom_form.custom_form_id;
|
||||
this.customForm.tableName = custom_form.table_name;
|
||||
this.select.table_name = custom_form.table_name;
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
}
|
||||
|
||||
const res = await show({ id: this.customForm.customFormId }, false);
|
||||
|
||||
//字段处理
|
||||
//初始表白名单
|
||||
let baseTable = new Map([
|
||||
['departments', async () => {
|
||||
const res = await listdept()
|
||||
return res
|
||||
}],
|
||||
['admins',[]]
|
||||
])
|
||||
let { fields, relation } = res;
|
||||
let fieldRes = fields.sort((a,b) => a.sort - b.sort)
|
||||
if (
|
||||
!fields ||
|
||||
!relation ||
|
||||
!fields instanceof Array ||
|
||||
!relation instanceof Array
|
||||
) {
|
||||
throw new Error("fields或relation格式错误");
|
||||
}
|
||||
console.log(fieldRes)
|
||||
fieldRes?.forEach((i, index) => {
|
||||
i._relations = relation.find(
|
||||
(j) => j.link_table_name.split("_")[1] === i.field
|
||||
);
|
||||
if (i.select_item && typeof i.select_item === "object") {
|
||||
let keys = Object.keys(i.select_item);
|
||||
i._params = keys.map((key) => {
|
||||
return {
|
||||
key,
|
||||
value: /^\d*$/.test(i.select_item[key])
|
||||
? Number(i.select_item[key])
|
||||
: i.select_item[key],
|
||||
};
|
||||
});
|
||||
}
|
||||
if (i.edit_input === 'file' || i.edit_input === 'files') {
|
||||
return
|
||||
}
|
||||
if (i._relations) {
|
||||
if (baseTable.get(i._relations.link_table_name)) {
|
||||
baseTable
|
||||
.get(i._relations.link_table_name)()
|
||||
.then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
} else {
|
||||
i._params = i._relations.parameter_id
|
||||
? getparameter({ id: i._relations.parameter_id }, false).then(
|
||||
(res) => {
|
||||
i._params = res.detail;
|
||||
}
|
||||
)
|
||||
: this.index({
|
||||
table_name: i._relations.link_table_name,
|
||||
page: 1,
|
||||
page_size: 9999,
|
||||
}).then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.form = fieldRes || [];
|
||||
this.form
|
||||
?.filter((i) => i.list_show)
|
||||
.forEach((i) => {
|
||||
let linkOb = {};
|
||||
|
||||
if (i.edit_input === "richtext") {
|
||||
linkOb.customFn = (row) => {
|
||||
return (
|
||||
<div
|
||||
style={{ "max-height": "55px","overflow": "scroll" }}
|
||||
domPropsInnerHTML={row[i.field]}
|
||||
></div>
|
||||
);
|
||||
};
|
||||
}
|
||||
if (
|
||||
i.select_item &&
|
||||
typeof i.select_item === "object" &&
|
||||
!(i.select_item instanceof Array)
|
||||
) {
|
||||
let keys = Object.keys(i.select_item);
|
||||
linkOb.customFn = (row) => {
|
||||
let paramMap = new Map();
|
||||
keys.forEach((key) => {
|
||||
paramMap.set(i.select_item[key], key);
|
||||
});
|
||||
|
||||
return <span>{paramMap.get(row[i.field]?.toString())}</span>;
|
||||
};
|
||||
}
|
||||
if (i._relations) {
|
||||
let { link_relation, foreign_key, link_with_name } = i._relations;
|
||||
if (link_relation === "newHasOne" || link_relation === "hasOne") {
|
||||
linkOb.customFn = (row) => {
|
||||
if (i.edit_input === "file") {
|
||||
return (
|
||||
<a
|
||||
download={row[link_with_name]?.original_name}
|
||||
href={row[link_with_name]?.url}
|
||||
>
|
||||
{row[link_with_name]?.original_name}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span>
|
||||
{row[link_with_name]?.name ||
|
||||
row[link_with_name]?.no ||
|
||||
row[link_with_name]?.value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (link_relation === "hasMany" || link_relation === "newHasMany") {
|
||||
linkOb.customFn = (row) => {
|
||||
if (i.edit_input === "files") {
|
||||
return (
|
||||
<div style="display: flex;flex-direction: column;">
|
||||
{row[link_with_name]?.map((o) => (
|
||||
<a>
|
||||
{ o?.original_name || o?.name }
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
{row[link_with_name]?.map((o) => (
|
||||
<p>
|
||||
{o?.name ||
|
||||
o?.no ||
|
||||
o?.value ||
|
||||
o?.biaoti ||
|
||||
o?.mingcheng}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
let alignLeft = ['dikuaimingcheng','chengjiandanwei','jianshedanwei','wuyedanwei']
|
||||
this.table.push(
|
||||
Object.assign(
|
||||
{
|
||||
prop: i.field,
|
||||
label: i.name,
|
||||
width: i.width,
|
||||
align: alignLeft.find(m => m === i.field) ? 'left' : 'center',
|
||||
fixed: i.is_fixed,
|
||||
},
|
||||
linkOb
|
||||
)
|
||||
);
|
||||
});
|
||||
this.table.unshift({
|
||||
type: "index",
|
||||
width: 60,
|
||||
label: "序号",
|
||||
});
|
||||
},
|
||||
|
||||
toTree (data) {
|
||||
const tree = []
|
||||
const otherObj = {}
|
||||
data.forEach(item => {
|
||||
item.children = []
|
||||
otherObj[item.id] = item
|
||||
})
|
||||
|
||||
data.forEach(item => {
|
||||
if (item.pid) {
|
||||
otherObj[item.pid].children.push(item)
|
||||
} else {
|
||||
tree.push(item)
|
||||
}
|
||||
})
|
||||
// 5.返回树状结构
|
||||
return tree;
|
||||
},
|
||||
async getTreeData () {
|
||||
const data = (await index({
|
||||
table_name: 'system_catalogues',
|
||||
page: 1,
|
||||
page_size: 9999,
|
||||
sort_name: 'pid'
|
||||
},false)).data
|
||||
this.treeList = this.toTree(data)
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
columnArrTest() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field).search_input === "checkbox" || this.form.find((i) => i.field === field).search_input === "radio"
|
||||
: false;
|
||||
};
|
||||
},
|
||||
getColumnField() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field)
|
||||
: {};
|
||||
};
|
||||
},
|
||||
getColumnParams() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field)._params
|
||||
: [];
|
||||
};
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTreeData();
|
||||
this.getFormDetail();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select {
|
||||
&__item {
|
||||
& > p {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& + div {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 10px;
|
||||
& > span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,593 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader
|
||||
:icon="$route.meta.icon"
|
||||
:text="$route.meta.title"
|
||||
style="margin-bottom: 10px; border: 0px; margin-top: 15px"
|
||||
>
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<header-content :auths="auths_auth_mixin">
|
||||
<template #search>
|
||||
<div style="display: flex">
|
||||
<Select
|
||||
v-model="select.filter[0].key"
|
||||
style="width: 100px"
|
||||
placeholder="搜索条目"
|
||||
>
|
||||
<Option
|
||||
v-for="item in form"
|
||||
:key="item.id"
|
||||
:value="item.field"
|
||||
>{{ item.name }}</Option
|
||||
>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="select.filter[0].op"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
placeholder="搜索条件"
|
||||
>
|
||||
<Option
|
||||
v-for="item in op"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</Select>
|
||||
<template
|
||||
v-if="
|
||||
select.filter[0].op !== 'range' &&
|
||||
!columnArrTest(select.filter[0].key)
|
||||
"
|
||||
>
|
||||
<Input
|
||||
v-model="select.filter[0].value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请填写关键词"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
select.filter[0].op !== 'range' &&
|
||||
columnArrTest(select.filter[0].key)
|
||||
"
|
||||
>
|
||||
<Select
|
||||
v-model="select.filter[0].value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请选择关键词"
|
||||
>
|
||||
<Option
|
||||
v-for="item in getColumnParams(select.filter[0].key)"
|
||||
:key="item.id"
|
||||
:value="
|
||||
getColumnField(select.filter[0].key)._relations
|
||||
? item[
|
||||
getColumnField(select.filter[0].key)._relations
|
||||
.foreign_key
|
||||
]
|
||||
: item.value
|
||||
"
|
||||
>{{
|
||||
item.key ||
|
||||
item.value ||
|
||||
item.name ||
|
||||
item.no ||
|
||||
item.mingcheng ||
|
||||
item.id
|
||||
}}</Option
|
||||
>
|
||||
</Select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Input
|
||||
:value="select.filter[0].value.split(',')[0]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围开始关键词"
|
||||
@input="(e) => inputStartHandler(e, select.filter[0])"
|
||||
/>
|
||||
<span
|
||||
style="
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>至</span
|
||||
>
|
||||
<Input
|
||||
:value="select.filter[0].value.split(',')[1]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围结束关键词"
|
||||
@input="(e) => inputEndHandler(e, select.filter[0])"
|
||||
/>
|
||||
</template>
|
||||
<Button
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
@click="$refs['xyTable'].getTableData(true)"
|
||||
>查询</Button
|
||||
>
|
||||
|
||||
<xy-selectors
|
||||
style="margin-left: 10px"
|
||||
@reset="reset"
|
||||
@search="$refs['xyTable'].getTableData(true)"
|
||||
>
|
||||
<template>
|
||||
<div class="select">
|
||||
<div
|
||||
class="select__item"
|
||||
v-for="(item, index) in select.filter"
|
||||
:key="`${item.value}-${index}`"
|
||||
>
|
||||
<p>条件{{ index + 1 }}</p>
|
||||
<Select
|
||||
v-model="item.key"
|
||||
style="width: 100px"
|
||||
placeholder="搜索条目"
|
||||
>
|
||||
<Option
|
||||
v-for="item in form"
|
||||
:key="item.id"
|
||||
:value="item.field"
|
||||
>{{ item.name }}</Option
|
||||
>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="item.op"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
placeholder="搜索条件"
|
||||
>
|
||||
<Option
|
||||
v-for="item in op"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</Option
|
||||
>
|
||||
</Select>
|
||||
<template
|
||||
v-if="
|
||||
item.op !== 'range' && !columnArrTest(item.key)
|
||||
"
|
||||
>
|
||||
<Input
|
||||
v-model="item.value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请填写关键词"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
item.op !== 'range' && columnArrTest(item.key)
|
||||
"
|
||||
>
|
||||
<Select
|
||||
v-model="item.value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请选择关键词"
|
||||
>
|
||||
<Option
|
||||
v-for="item in getColumnParams(item.key)"
|
||||
:key="item.id"
|
||||
:value="
|
||||
getColumnField(item.key)._relations
|
||||
? item[
|
||||
getColumnField(item.key)._relations
|
||||
.foreign_key
|
||||
]
|
||||
: item.value
|
||||
"
|
||||
>{{
|
||||
item.key ||
|
||||
item.value ||
|
||||
item.name ||
|
||||
item.no ||
|
||||
item.mingcheng ||
|
||||
item.id
|
||||
}}</Option
|
||||
>
|
||||
</Select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Input
|
||||
:value="item.value.split(',')[0]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围开始关键词"
|
||||
@input="(e) => inputStartHandler(e, item)"
|
||||
/>
|
||||
<span style="margin-left: 10px">至</span>
|
||||
<Input
|
||||
:value="item.value.split(',')[1]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围结束关键词"
|
||||
@input="(e) => inputEndHandler(e, item)"
|
||||
/>
|
||||
</template>
|
||||
<el-button
|
||||
v-if="index !== 0"
|
||||
size="small"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
style="margin-left: 10px"
|
||||
@click="select.filter.splice(index, 1)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="
|
||||
select.filter.push({ key: '', op: '', value: '' })
|
||||
"
|
||||
></el-button>
|
||||
<span>新增一条</span>
|
||||
</div>
|
||||
</template>
|
||||
</xy-selectors>
|
||||
</div>
|
||||
</template>
|
||||
<template #create>
|
||||
<Button
|
||||
type="primary"
|
||||
@click="
|
||||
$refs['addMenu'].setType('add'), $refs['addMenu'].show()
|
||||
"
|
||||
>新增</Button
|
||||
>
|
||||
</template>
|
||||
<template #import>
|
||||
<Button type="primary" @click="$refs['imports'].show()"
|
||||
>导入</Button
|
||||
>
|
||||
</template>
|
||||
<template #export>
|
||||
<Button
|
||||
type="primary"
|
||||
@click="exportExcel(new Date().getTime().toString())"
|
||||
>导出</Button
|
||||
>
|
||||
</template>
|
||||
</header-content>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table
|
||||
:is-page="false"
|
||||
:list="treeList"
|
||||
:btn-width="300"
|
||||
:auths="auths_auth_mixin"
|
||||
:delay-req="true"
|
||||
:destroy-action="destroy"
|
||||
ref="xyTable"
|
||||
:border="true"
|
||||
row-key="id"
|
||||
default-expand-all
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
:req-opt="select"
|
||||
:destroy-req-opt="select"
|
||||
:table-item="tableItem"
|
||||
@editor="
|
||||
(row) => {
|
||||
$refs['addMenu'].setId(row.id);
|
||||
$refs['addMenu'].setType('editor');
|
||||
$refs['addMenu'].show();
|
||||
}
|
||||
"
|
||||
>
|
||||
</xy-table>
|
||||
|
||||
<addMenu
|
||||
ref="addMenu"
|
||||
:tree-data="[{ id: 0, name: '根节点', children:this.treeList }]"
|
||||
:table-name="customForm.tableName"
|
||||
@refresh="$refs['xyTable'].getTableData()"
|
||||
></addMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index as fieldIndex } from "@/api/system/customFormField";
|
||||
import { authMixin } from "@/mixin/authMixin";
|
||||
import { index, destroy } from "@/api/system/baseForm";
|
||||
import { op } from "@/const/op";
|
||||
import { download } from "@/utils/downloadRequest";
|
||||
import { getparameter } from "@/api/system/dictionary";
|
||||
import { show } from "@/api/system/customForm";
|
||||
import * as XLSX from "xlsx";
|
||||
import { saveAs } from "file-saver";
|
||||
import { listdept } from "@/api/system/department";
|
||||
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import headerContent from "@/components/LxHeader/XyContent.vue";
|
||||
import drawer from "@/views/component/drawer.vue";
|
||||
import addMenu from "@/views/operate/component/addMenu.vue";
|
||||
export default {
|
||||
name: "tableList",
|
||||
components: {
|
||||
LxHeader,
|
||||
headerContent,
|
||||
drawer,
|
||||
|
||||
addMenu,
|
||||
},
|
||||
mixins: [authMixin],
|
||||
data() {
|
||||
return {
|
||||
op,
|
||||
treeList: [],
|
||||
select: {
|
||||
table_name: "",
|
||||
filter: [
|
||||
{
|
||||
key: "",
|
||||
op: "",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
form: [],
|
||||
table: [],
|
||||
customForm: {
|
||||
customFormId: "",
|
||||
tableName: "",
|
||||
},
|
||||
tableItem: [
|
||||
{
|
||||
type: 'index',
|
||||
label: '序号'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: 'created_at',
|
||||
label: '创建时间'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
index,
|
||||
destroy,
|
||||
download,
|
||||
reset() {
|
||||
this.select.filter.splice(1);
|
||||
this.select.filter[0] = {
|
||||
key: "",
|
||||
op: "",
|
||||
value: "",
|
||||
};
|
||||
},
|
||||
|
||||
async exportExcel(sheetName) {
|
||||
const res = await index(
|
||||
Object.assign(this.select, { page: 1, page_size: 9999 })
|
||||
);
|
||||
if (res.data) {
|
||||
let headers = this.form.map((i) => {
|
||||
return {
|
||||
key: i.field,
|
||||
title: i.name,
|
||||
};
|
||||
});
|
||||
const data = res.data.map((row) =>
|
||||
headers.map((header) => row[header.key])
|
||||
);
|
||||
data.unshift(headers.map((header) => header.title));
|
||||
const wb = XLSX.utils.book_new();
|
||||
const ws = XLSX.utils.aoa_to_sheet(data);
|
||||
XLSX.utils.book_append_sheet(wb, ws, sheetName);
|
||||
const wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array",
|
||||
});
|
||||
saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
`${sheetName}.xlsx`
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
//target要为内存地址引用类型
|
||||
inputStartHandler(e, target) {
|
||||
let temp = target?.value.split(",")[1];
|
||||
target.value = `${e},${temp ? temp : ""}`;
|
||||
},
|
||||
inputEndHandler(e, target) {
|
||||
let temp = target?.value.split(",")[0];
|
||||
target.value = `${temp ? temp : ""},${e}`;
|
||||
},
|
||||
|
||||
async getFormDetail() {
|
||||
if (this.$route.meta.params?.custom_form) {
|
||||
let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
|
||||
try {
|
||||
let custom_form = JSON.parse(decode);
|
||||
this.customForm.customFormId = custom_form.custom_form_id;
|
||||
this.customForm.tableName = custom_form.table_name;
|
||||
this.select.table_name = custom_form.table_name;
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
}
|
||||
|
||||
const res = await show({ id: this.customForm.customFormId }, false);
|
||||
|
||||
//字段处理
|
||||
//初始表白名单
|
||||
let baseTable = new Map([
|
||||
[
|
||||
"departments",
|
||||
async () => {
|
||||
const res = await listdept();
|
||||
return res;
|
||||
},
|
||||
],
|
||||
["admins", []],
|
||||
]);
|
||||
let { fields, relation } = res;
|
||||
let fieldRes = fields.sort((a, b) => a.sort - b.sort);
|
||||
if (
|
||||
!fields ||
|
||||
!relation ||
|
||||
!fields instanceof Array ||
|
||||
!relation instanceof Array
|
||||
) {
|
||||
throw new Error("fields或relation格式错误");
|
||||
}
|
||||
console.log(fieldRes);
|
||||
fieldRes?.forEach((i, index) => {
|
||||
i._relations = relation.find(
|
||||
(j) => j.link_table_name.split("_")[1] === i.field
|
||||
);
|
||||
if (i.select_item && typeof i.select_item === "object") {
|
||||
let keys = Object.keys(i.select_item);
|
||||
i._params = keys.map((key) => {
|
||||
return {
|
||||
key,
|
||||
value: /^\d*$/.test(i.select_item[key])
|
||||
? Number(i.select_item[key])
|
||||
: i.select_item[key],
|
||||
};
|
||||
});
|
||||
}
|
||||
if (i.edit_input === "file" || i.edit_input === "files") {
|
||||
return;
|
||||
}
|
||||
if (i._relations) {
|
||||
if (baseTable.get(i._relations.link_table_name)) {
|
||||
baseTable
|
||||
.get(i._relations.link_table_name)()
|
||||
.then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
} else {
|
||||
i._params = i._relations.parameter_id
|
||||
? getparameter({ id: i._relations.parameter_id }, false).then(
|
||||
(res) => {
|
||||
i._params = res.detail;
|
||||
}
|
||||
)
|
||||
: this.index({
|
||||
table_name: i._relations.link_table_name,
|
||||
page: 1,
|
||||
page_size: 9999,
|
||||
}).then((res) => {
|
||||
i._params = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.form = fieldRes || [];
|
||||
},
|
||||
|
||||
toTree (data) {
|
||||
const tree = []
|
||||
const otherObj = {}
|
||||
data.forEach(item => {
|
||||
item.children = []
|
||||
otherObj[item.id] = item
|
||||
})
|
||||
|
||||
data.forEach(item => {
|
||||
if (item.pid) {
|
||||
otherObj[item.pid].children.push(item)
|
||||
} else {
|
||||
tree.push(item)
|
||||
}
|
||||
})
|
||||
// 5.返回树状结构
|
||||
return tree;
|
||||
},
|
||||
async getTreeData () {
|
||||
const data = (await index({
|
||||
table_name: this.customForm.tableName,
|
||||
page: 1,
|
||||
page_size: 9999,
|
||||
sort_name: 'pid'
|
||||
},false)).data
|
||||
this.treeList = this.toTree(data)
|
||||
console.log(12321,this.treeList)
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
columnArrTest() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field).search_input ===
|
||||
"checkbox" ||
|
||||
this.form.find((i) => i.field === field).search_input === "radio"
|
||||
: false;
|
||||
};
|
||||
},
|
||||
getColumnField() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field)
|
||||
: {};
|
||||
};
|
||||
},
|
||||
getColumnParams() {
|
||||
return function (field) {
|
||||
return this.form.find((i) => i.field === field)
|
||||
? this.form.find((i) => i.field === field)._params
|
||||
: [];
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getFormDetail();
|
||||
this.getTreeData();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select {
|
||||
&__item {
|
||||
& > p {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& + div {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 10px;
|
||||
& > span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue