parent
85a050cc0f
commit
20bcb15194
@ -1,6 +1,6 @@
|
||||
# just a flag
|
||||
ENV = 'development'
|
||||
ENV='development'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = http://starter.ali251.langye.net
|
||||
VUE_APP_UPLOAD_API =http://starter.ali251.langye.net/api/admin/upload-file
|
||||
VUE_APP_BASE_API=http://starter.ali251.langye.net
|
||||
VUE_APP_UPLOAD_API=http://starter.ali251.langye.net/api/admin/upload-file
|
||||
|
||||
@ -0,0 +1,72 @@
|
||||
import {getToken} from "@/utils/auth";
|
||||
|
||||
export const addPropsMap = new Map([
|
||||
["text", {
|
||||
clearable: true
|
||||
}],
|
||||
["richtext",{}],
|
||||
['radio',{
|
||||
|
||||
}],
|
||||
["checkbox", {
|
||||
|
||||
}],
|
||||
["date", {
|
||||
clearable: true,
|
||||
valueFormat: 'yyyy-MM-dd'
|
||||
}],
|
||||
["datetime", {
|
||||
type: 'datetime',
|
||||
clearable: true,
|
||||
valueFormat: 'yyyy-MM-dd mm:hh:ss',
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
}
|
||||
}],
|
||||
["file",{
|
||||
action: process.env.VUE_APP_UPLOAD_API,
|
||||
headers: {
|
||||
Authorization: `Bearer ${getToken()}`,
|
||||
},
|
||||
autoUpload: false,
|
||||
multiple: false,
|
||||
limit: 1
|
||||
}],
|
||||
["files",{
|
||||
action: process.env.VUE_APP_UPLOAD_API,
|
||||
headers: {
|
||||
Authorization: `Bearer ${getToken()}`,
|
||||
},
|
||||
autoUpload: false,
|
||||
multiple: true
|
||||
}],
|
||||
["textarea", {
|
||||
clearable: true,
|
||||
type: 'textarea',
|
||||
autosize: {
|
||||
'minRows': 2
|
||||
}
|
||||
}],
|
||||
|
||||
|
||||
["map", "el-input"],
|
||||
])
|
||||
@ -1,108 +1,14 @@
|
||||
export default [
|
||||
{
|
||||
label: "element-ui",
|
||||
options: [
|
||||
{
|
||||
value: "el-radio",
|
||||
label: "单选框",
|
||||
},
|
||||
{
|
||||
value: "el-checkbox",
|
||||
label: "多选框",
|
||||
},
|
||||
{
|
||||
value: "text",
|
||||
label: "输入框",
|
||||
},
|
||||
{
|
||||
value: "el-input-number",
|
||||
label: "计数器",
|
||||
},
|
||||
{
|
||||
value: "el-select",
|
||||
label: "选择器"
|
||||
},
|
||||
{
|
||||
value: "el-switch",
|
||||
label: "开关",
|
||||
},
|
||||
{
|
||||
value: "el-slider",
|
||||
label: "滑块",
|
||||
},
|
||||
{
|
||||
value: "el-time-select",
|
||||
label: "时间选择器",
|
||||
},
|
||||
{
|
||||
value: "el-date-picker",
|
||||
label: "日期选择器",
|
||||
},
|
||||
{
|
||||
value: "el-upload",
|
||||
label: "上传",
|
||||
},
|
||||
{
|
||||
value: "el-rate",
|
||||
label: "评分",
|
||||
},
|
||||
{
|
||||
value: "el-color-picker",
|
||||
label: "颜色选择器",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "iview",
|
||||
options: [
|
||||
{
|
||||
value: "Input",
|
||||
label: "输入框",
|
||||
},
|
||||
{
|
||||
value: "Radio",
|
||||
label: "单选框",
|
||||
},
|
||||
{
|
||||
value: "Checkbox",
|
||||
label: "多选框",
|
||||
},
|
||||
{
|
||||
value: "Switch",
|
||||
label: "开关",
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "选择器",
|
||||
},
|
||||
{
|
||||
value: "Slider",
|
||||
label: "滑块",
|
||||
},
|
||||
{
|
||||
value: "DatePicker",
|
||||
label: "日期选择器",
|
||||
},
|
||||
{
|
||||
value: "TimeSelect",
|
||||
label: "时间选择器",
|
||||
},
|
||||
{
|
||||
value: "InputNumber",
|
||||
label: "计数器",
|
||||
},
|
||||
{
|
||||
value: "Upload",
|
||||
label: "上传",
|
||||
},
|
||||
{
|
||||
value: "Rate",
|
||||
label: "评分",
|
||||
},
|
||||
{
|
||||
value: "ColorPicker",
|
||||
label: "颜色选择器",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export const domMap = new Map([
|
||||
["text", "el-input"],
|
||||
["richtext",'my-tinymce'],
|
||||
['radio','el-radio-group'],
|
||||
["checkbox", "el-checkbox-group"],
|
||||
["date", "el-date-picker"],
|
||||
["datetime", "el-date-picker"],
|
||||
["file","el-upload"],
|
||||
["files","el-upload"],
|
||||
["textarea", "el-input"],
|
||||
|
||||
|
||||
["map", "el-input"],
|
||||
])
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
|
||||
export const templatePropsMap = new Map([
|
||||
["text", {
|
||||
readonly: true,
|
||||
clearable: true
|
||||
}],
|
||||
["richtext",'my-tinymce'],
|
||||
['radio',{
|
||||
value: '选项1'
|
||||
}],
|
||||
["checkbox", {
|
||||
value: ['选项1']
|
||||
}],
|
||||
["date", {
|
||||
readonly: true,
|
||||
}],
|
||||
["datetime", {
|
||||
readonly: true,
|
||||
}],
|
||||
["file",{
|
||||
action: "a",
|
||||
fileList: [
|
||||
{name: 'food.jpeg', url: ''}
|
||||
],
|
||||
autoUpload: false,
|
||||
multiple: false,
|
||||
limit: 1
|
||||
}],
|
||||
["files",{
|
||||
action: "a",
|
||||
fileList: [
|
||||
{name: 'food.jpeg', url: ''},
|
||||
{name: 'food2.jpeg', url: ''}
|
||||
],
|
||||
autoUpload: false,
|
||||
multiple: true
|
||||
}],
|
||||
["textarea", {
|
||||
readonly: true,
|
||||
clearable: true,
|
||||
type: 'textarea',
|
||||
autosize: {
|
||||
'minRows': 2
|
||||
}
|
||||
}],
|
||||
|
||||
|
||||
["map", "el-input"],
|
||||
])
|
||||
@ -0,0 +1,102 @@
|
||||
import { save, index, destroy } from "@/api/system/customFormField";
|
||||
import { Message } from "element-ui";
|
||||
const state = {
|
||||
formList: [], //更个表单配置信息
|
||||
copyFormListId: [], //备份原始的字段id数组,以做删除
|
||||
selectedForm: null, //当前编辑的表单字段配置
|
||||
selectedIndex: null,
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
SET_COPY_FORM_LIST_ID: (state, arr) => {
|
||||
state.copyFormListId = arr;
|
||||
},
|
||||
SET_SELECTED_INDEX: (state, index) => {
|
||||
state.selectedIndex = index;
|
||||
},
|
||||
CLEAR_SELECTED_INDEX: (state) => {
|
||||
state.selectedIndex = null;
|
||||
},
|
||||
SET_SELECTED: (state, value) => {
|
||||
state.selectedForm = value;
|
||||
},
|
||||
CLEAR_SELECTED: (state, value) => {
|
||||
state.selectedForm = null;
|
||||
},
|
||||
SET_FORM_LIST: (state, list) => {
|
||||
state.formList = list;
|
||||
},
|
||||
SPLICE_FORM_LIST: (state, info) => {
|
||||
const { index, length, config } = info;
|
||||
if (config) {
|
||||
state.formList.splice(index, length || 0, config || state.selectedForm);
|
||||
} else {
|
||||
state.formList.splice(index, length || 0);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const actions = {
|
||||
submit: ({ state, commit }) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
state.formList.forEach((item,index) => {
|
||||
item.sort = index + 1
|
||||
})
|
||||
let formListId = state.formList.filter((i) => !!i.id).map((i) => i.id);
|
||||
let deleteIds = state.copyFormListId.filter(
|
||||
(i) => !formListId.includes(i)
|
||||
);
|
||||
let promiseAll = [
|
||||
...state.formList.map((i) => save(i)),
|
||||
...deleteIds.map((i) => destroy({ id: i })),
|
||||
];
|
||||
Promise.all(promiseAll)
|
||||
.then((res) => {
|
||||
Message({
|
||||
type: "success",
|
||||
message: "保存成功",
|
||||
});
|
||||
resolve(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
getFormList: ({ state, commit }, custom_form_id) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
index(
|
||||
{
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
sort_name: "sort",
|
||||
sort_type: "asc",
|
||||
custom_form_id,
|
||||
},
|
||||
true
|
||||
)
|
||||
.then((res) => {
|
||||
resolve(res);
|
||||
if (res?.data instanceof Array) {
|
||||
commit("SET_FORM_LIST", res.data);
|
||||
commit(
|
||||
"SET_COPY_FORM_LIST_ID",
|
||||
res.data.map((i) => i.id)
|
||||
);
|
||||
} else {
|
||||
console.warn("res.data not Array");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions,
|
||||
};
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
ref="elDrawer"
|
||||
:title="detail.name || '详情'"
|
||||
:visible.sync="isShow"
|
||||
size="45%"
|
||||
direction="rtl"
|
||||
>
|
||||
<template>
|
||||
<el-descriptions
|
||||
size="medium"
|
||||
direction="vertical"
|
||||
:column="3"
|
||||
:labelStyle="{ 'font-weight': '600', width: '33%' }"
|
||||
:content-style="{ width: '33%' }"
|
||||
border
|
||||
style="margin: 20px 10px"
|
||||
>
|
||||
<template v-for="info in formInfo">
|
||||
<el-descriptions-item :label="info.name">{{
|
||||
contentFormat(info)
|
||||
}}</el-descriptions-item>
|
||||
</template>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { show } from "@/api/system/baseForm";
|
||||
export default {
|
||||
props: {
|
||||
formInfo: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableName: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
isShow: false,
|
||||
|
||||
detail: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hidden() {
|
||||
this.isShow = false;
|
||||
},
|
||||
setId(id) {
|
||||
if (typeof id == "number") {
|
||||
this.id = id;
|
||||
} else {
|
||||
console.error("error typeof id: " + typeof id);
|
||||
}
|
||||
},
|
||||
getId() {
|
||||
return this.id;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
contentFormat() {
|
||||
return function (i) {
|
||||
if (i.parameter_id) {
|
||||
return this.detail[i.link_with_name]?.value;
|
||||
}
|
||||
if (i.link_table_name) {
|
||||
if (i.link_relation === "hasOne") {
|
||||
return (
|
||||
this.detail[i.link_with_name]?.name ||
|
||||
this.detail[i.link_with_name]?.no ||
|
||||
this.detail[i.link_with_name]?.value
|
||||
);
|
||||
}
|
||||
if (i.link_relation === "hasMany") {
|
||||
return this.detail[i.link_with_name]
|
||||
?.map((o) => o?.name || o?.no || o?.value)
|
||||
?.toString();
|
||||
}
|
||||
}
|
||||
|
||||
return this.detail[i.field]
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isShow(newVal) {
|
||||
if (newVal) {
|
||||
show(
|
||||
{
|
||||
table_name: this.tableName,
|
||||
id: this.id,
|
||||
},
|
||||
true
|
||||
).then((res) => {
|
||||
console.log(111, res);
|
||||
this.detail = res;
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btns {
|
||||
margin: 0 10px 12px 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,248 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" :text="customForm.tableName" 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="item.id">{{ item.value }}</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">
|
||||
<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="item.id">{{ item.value }}</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['dialog'].setType('add'),$refs['dialog'].show()"
|
||||
>新增</Button
|
||||
>
|
||||
</template>
|
||||
</header-content>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table
|
||||
:auths="auths_auth_mixin"
|
||||
:delay-req="true"
|
||||
:destroy-action="destroy"
|
||||
ref="xyTable"
|
||||
:border="true"
|
||||
:action="index"
|
||||
:req-opt="Object.assign(select,selectForm)"
|
||||
:destroy-req-opt="select"
|
||||
:table-item="table"
|
||||
@editor="row => {
|
||||
$refs['dialog'].setId(row.id);
|
||||
$refs['dialog'].setType('editor');
|
||||
$refs['dialog'].show();
|
||||
}"></xy-table>
|
||||
|
||||
<dialoger :table-name="customForm.tableName" :form-info="form" ref="dialog" @refresh="$refs['xyTable'].getTableData()"></dialoger>
|
||||
</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 dialoger from './dialog.vue'
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import headerContent from "@/components/LxHeader/XyContent.vue";
|
||||
export default {
|
||||
components:{
|
||||
LxHeader,
|
||||
dialoger,
|
||||
headerContent,
|
||||
},
|
||||
mixins: [authMixin],
|
||||
data() {
|
||||
return {
|
||||
op,
|
||||
select: {
|
||||
table_name: "",
|
||||
filter: [
|
||||
{
|
||||
key: "",
|
||||
op: "",
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
selectForm: [],
|
||||
form: [],
|
||||
table: [],
|
||||
customForm: {
|
||||
customFormId: "",
|
||||
tableName: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
index,destroy,
|
||||
reset() {
|
||||
},
|
||||
|
||||
//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 getField() {
|
||||
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 fieldIndex({
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
custom_form_id: this.customForm.customFormId
|
||||
})
|
||||
this.form = res.data
|
||||
this.selectForm = ''
|
||||
this.table = res.data.map(i => {
|
||||
return {
|
||||
prop: i.field,
|
||||
label: i.name
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columnArrTest() {
|
||||
return function (field) {
|
||||
return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field).search_input === 'checkbox' : false
|
||||
}
|
||||
},
|
||||
getColumnParams() {
|
||||
return function (field) {
|
||||
return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field).paramters : []
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getField()
|
||||
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,119 +1,328 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div>
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<LxHeader icon="md-apps" :text="customForm.tableName" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<div>
|
||||
<Button type="primary" style="margin-left: 10px" @click="$refs['xyTable'].getTableData()">查询</Button>
|
||||
<Button type="primary" style="margin-left: 10px">新增</Button>
|
||||
</div>
|
||||
<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="item.id">{{ item.value || item.name || item.no || 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="item.id">{{ item.value || item.name || item.no || 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['dialog'].setType('add'),$refs['dialog'].show()"
|
||||
>新增</Button
|
||||
>
|
||||
</template>
|
||||
<template #export>
|
||||
<Button
|
||||
type="primary"
|
||||
@click="download('/api/admin/base-form/index','get',Object.assign(select,{ page: 1,page_size: 9999,is_export: 1 }),`${new Date().getTime()}.xlsx`)"
|
||||
>导出</Button
|
||||
>
|
||||
</template>
|
||||
</header-content>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table
|
||||
:auths="auths_auth_mixin"
|
||||
:delay-req="true"
|
||||
:destroy-action="destroy"
|
||||
ref="xyTable"
|
||||
:border="true"
|
||||
:list="[]"
|
||||
:req-opt="{keyword:'123'}"
|
||||
res-prop=""
|
||||
:table-item="table"></xy-table>
|
||||
:action="index"
|
||||
:req-opt="Object.assign(select,selectForm)"
|
||||
:destroy-req-opt="select"
|
||||
:table-item="table"
|
||||
@detail="row => {
|
||||
$refs['drawer'].setId(row.id);
|
||||
$refs['drawer'].show();
|
||||
}"
|
||||
@editor="row => {
|
||||
$refs['dialog'].setId(row.id);
|
||||
$refs['dialog'].setType('editor');
|
||||
$refs['dialog'].show();
|
||||
}">
|
||||
</xy-table>
|
||||
|
||||
<dialoger :table-name="customForm.tableName" :form-info="form" ref="dialog" @refresh="$refs['xyTable'].getTableData()"></dialoger>
|
||||
<drawer :table-name="customForm.tableName" :form-info="form" ref="drawer"></drawer>
|
||||
</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 dialoger from './dialog.vue';
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import { getData } from './data'
|
||||
import {listmenu} from '@/api/system/menu'
|
||||
import headerContent from "@/components/LxHeader/XyContent.vue";
|
||||
import drawer from "@/views/component/drawer.vue";
|
||||
export default {
|
||||
components:{
|
||||
LxHeader
|
||||
LxHeader,
|
||||
dialoger,
|
||||
headerContent,
|
||||
drawer,
|
||||
},
|
||||
mixins: [authMixin],
|
||||
data() {
|
||||
return {
|
||||
select:{
|
||||
page:1,
|
||||
page_size:10
|
||||
op,
|
||||
select: {
|
||||
table_name: "",
|
||||
filter: [
|
||||
{
|
||||
key: "",
|
||||
op: "",
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
list:[],
|
||||
table:[
|
||||
{
|
||||
type:'expand',
|
||||
width:46,
|
||||
expandFn:props => {
|
||||
selectForm: [],
|
||||
form: [],
|
||||
table: [],
|
||||
customForm: {
|
||||
customFormId: "",
|
||||
tableName: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
index,destroy,download,
|
||||
reset() {
|
||||
this.select.filter.splice(1)
|
||||
this.select.filter[0] = {
|
||||
key: "",
|
||||
op: "",
|
||||
value: ""
|
||||
}
|
||||
},
|
||||
|
||||
//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 getField() {
|
||||
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 fieldIndex({
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
custom_form_id: this.customForm.customFormId,
|
||||
sort_name: 'sort',
|
||||
sort_type: 'asc',
|
||||
})
|
||||
if(res.data && res.data instanceof Array) {
|
||||
res.data.forEach(i => {
|
||||
if (i.field) {
|
||||
if (i.edit_input === "file" || i.edit_input === "files") {
|
||||
i._fileList = [];
|
||||
}
|
||||
if (
|
||||
(i.edit_input === "checkbox" || i.edit_input === "radio") &&
|
||||
i.parameter_id
|
||||
) {
|
||||
getparameter({ id: i.parameter_id }).then((res) => {
|
||||
i._paramters = res.detail ?? [];
|
||||
});
|
||||
}
|
||||
if (
|
||||
(i.edit_input === "checkbox" || i.edit_input === "radio") &&
|
||||
i.link_table_name
|
||||
) {
|
||||
index({
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
table_name: i.link_table_name,
|
||||
}).then((res) => {
|
||||
i._paramters = res.data ?? [];
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
this.form = res.data
|
||||
this.selectForm = ''
|
||||
this.table = res.data.map(i => {
|
||||
let linkOb = {}
|
||||
if(i.parameter_id) {
|
||||
linkOb.customFn = row => {
|
||||
return (
|
||||
<div>{props.$index}</div>
|
||||
<span>{ row[i.link_with_name]?.value }</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
prop:'id',
|
||||
label:'编号',
|
||||
width:80,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
prop:'name',
|
||||
label:'菜单',
|
||||
width:120,
|
||||
sortable:'custom',
|
||||
},
|
||||
{
|
||||
prop:'url',
|
||||
label:'菜单路径',
|
||||
minWidth:140
|
||||
},
|
||||
{
|
||||
prop:'path',
|
||||
label:'路由',
|
||||
minWidth:140
|
||||
},
|
||||
{
|
||||
prop:'icon',
|
||||
label:'图标',
|
||||
minWidth:100
|
||||
},
|
||||
{
|
||||
prop:'api_prefix',
|
||||
label:'API前缀',
|
||||
minWidth:100
|
||||
},
|
||||
{
|
||||
prop:'sortnumber',
|
||||
label:'排序',
|
||||
width:100,
|
||||
filters:[
|
||||
{
|
||||
text:"0",
|
||||
value:0
|
||||
},
|
||||
{
|
||||
text:"1",
|
||||
value:1
|
||||
}
|
||||
if(i.link_table_name) {
|
||||
if(i.link_relation === 'hasOne') {
|
||||
linkOb.customFn = row => {
|
||||
return (
|
||||
<span>{ row[i.link_with_name]?.name || row[i.link_with_name]?.no || row[i.link_with_name]?.value }</span>
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
if(i.link_relation === 'hasMany') {
|
||||
linkOb.customFn = row => {
|
||||
return (
|
||||
<div>
|
||||
{ row[i.link_with_name]?.map(o => (<span>{ o?.name || o?.no || o?.value }</span>)) }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
return Object.assign({
|
||||
prop: i.field,
|
||||
label: i.name
|
||||
},linkOb)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
listmenu,
|
||||
getList(){
|
||||
this.total = getData(this.select).total
|
||||
this.list = getData(this.select).data
|
||||
}
|
||||
computed: {
|
||||
columnArrTest() {
|
||||
return function (field) {
|
||||
return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field).search_input === 'checkbox' : false
|
||||
}
|
||||
},
|
||||
getColumnParams() {
|
||||
return function (field) {
|
||||
return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field)._paramters : []
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.getList()
|
||||
created() {
|
||||
this.getField()
|
||||
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
:fullscreen="true"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<template #title>
|
||||
<div class="btns">
|
||||
<span class="title">{{ custom_form.name }}</span>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-refresh-right"
|
||||
circle
|
||||
@click="$store.dispatch('form/getFormList')"
|
||||
></el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
circle
|
||||
@click="update({ id:custom_form_id })"
|
||||
></el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-check"
|
||||
circle
|
||||
@click="submit"
|
||||
></el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<Split v-model="splitL" :min="0.05">
|
||||
<template #left>
|
||||
<draggable
|
||||
v-model="types"
|
||||
:sort="false"
|
||||
:group="{ name: 'items', pull: 'clone' }"
|
||||
>
|
||||
<div class="type-item" v-for="item in types">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</draggable>
|
||||
</template>
|
||||
<template #right>
|
||||
<Split v-model="splitR" :min="0.2">
|
||||
<template #left>
|
||||
<div style="height: 100%">
|
||||
<el-dialog
|
||||
id="template-dialog"
|
||||
:title="custom_form.name || '模板表单'"
|
||||
style="position: relative; inset: 0 0 0 0; height: 100%"
|
||||
width="600px"
|
||||
top="40px"
|
||||
:visible="true"
|
||||
:modal="false"
|
||||
:append-to-body="false"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<template>
|
||||
<el-form
|
||||
label-width="80px"
|
||||
label-position="right"
|
||||
size="small"
|
||||
>
|
||||
<draggable
|
||||
:value="formList"
|
||||
group="items"
|
||||
@change="changeHandler"
|
||||
>
|
||||
<el-form-item
|
||||
:label="i.name || '字段名称'"
|
||||
:required="
|
||||
!!i.validation && i.validation.length > 0
|
||||
"
|
||||
v-for="(i, index) in formList"
|
||||
@click.native="selectPick(i, index)"
|
||||
>
|
||||
<formSlotRender
|
||||
:config="i"
|
||||
:index="index"
|
||||
></formSlotRender>
|
||||
</el-form-item>
|
||||
</draggable>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<div slot="footer">
|
||||
<div>
|
||||
<el-button>取 消</el-button>
|
||||
<el-button type="warning" plain>重 置</el-button>
|
||||
<el-button type="primary">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<template #right>
|
||||
<editPane :rules="rules" :types="types"></editPane>
|
||||
</template>
|
||||
</Split>
|
||||
</template>
|
||||
</Split>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listparameter } from "@/api/system/dictionary";
|
||||
import { index, config } from "@/api/system/customFormField";
|
||||
import { mapState } from "vuex";
|
||||
import { index as formIndex } from "@/api/system/customForm";
|
||||
import { deepCopy } from "@/utils";
|
||||
import { update } from "@/api/system/customForm";
|
||||
|
||||
import formSlotRender from "../components/formSlotRender.vue";
|
||||
import editPane from "../components/editPane.vue";
|
||||
export default {
|
||||
components: {
|
||||
formSlotRender,
|
||||
editPane,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//分割面板
|
||||
splitL: 0.13,
|
||||
splitR: 0.7,
|
||||
|
||||
custom_form: {},
|
||||
custom_form_id: "",
|
||||
dialogVisible: false,
|
||||
|
||||
types: [], //输入类型
|
||||
rules: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
deepCopy,update,
|
||||
show() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
hidden() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
/**
|
||||
* @param key:string | array
|
||||
* @param value:string | array
|
||||
**/
|
||||
set(key, value) {
|
||||
if (
|
||||
key instanceof Array &&
|
||||
value instanceof Array &&
|
||||
key?.length === value?.length
|
||||
) {
|
||||
key.forEach((k, i) => {
|
||||
this[k] = value[i];
|
||||
});
|
||||
} else if (typeof key === "string") {
|
||||
this[key] = value;
|
||||
} else {
|
||||
throw new Error("参数key类型错误");
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认退出？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
|
||||
//获取列表数据
|
||||
async getForms() {
|
||||
const res = await formIndex({ page: 1, page_size: 999 });
|
||||
this.forms = res.data;
|
||||
},
|
||||
async getParameters() {
|
||||
const res = await listparameter({ page: 1, page_size: 999 });
|
||||
this.parameters = res.data;
|
||||
},
|
||||
async getConfig() {
|
||||
const { edit_to_migration, validation_rules } = await config(false);
|
||||
this.types = edit_to_migration;
|
||||
this.rules = validation_rules;
|
||||
},
|
||||
|
||||
selectPick(i, index) {
|
||||
this.$store.commit("form/SET_SELECTED_INDEX", index);
|
||||
this.$store.commit("form/SET_SELECTED", deepCopy(i));
|
||||
},
|
||||
//拖拽
|
||||
changeHandler(e) {
|
||||
if (e.added) {
|
||||
const { element, newIndex } = e.added;
|
||||
const originalData = element;
|
||||
const newItem = {
|
||||
id: "",
|
||||
custom_form_id: this.custom_form_id,
|
||||
field: "",
|
||||
name: "",
|
||||
parameter_id: "",
|
||||
search_input: originalData.edit_input,
|
||||
edit_input: originalData.edit_input,
|
||||
sort: newIndex,
|
||||
help: "",
|
||||
validation: "",
|
||||
select_item: "",
|
||||
list_show: 1,
|
||||
link_table_name: "",
|
||||
link_relation: "",
|
||||
};
|
||||
|
||||
console.log(newItem);
|
||||
|
||||
this.$store.commit("form/SPLICE_FORM_LIST", {
|
||||
index: newIndex,
|
||||
length: 0,
|
||||
config: newItem,
|
||||
});
|
||||
}
|
||||
if (e.moved) {
|
||||
const { element, newIndex, oldIndex } = e.moved;
|
||||
|
||||
if (element?.sort) {
|
||||
element.sort = newIndex;
|
||||
}
|
||||
|
||||
this.$store.commit("form/SPLICE_FORM_LIST", {
|
||||
index: oldIndex,
|
||||
length: 1,
|
||||
});
|
||||
this.$store.commit("form/SPLICE_FORM_LIST", {
|
||||
index: newIndex,
|
||||
length: 0,
|
||||
config: element,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
submit() {
|
||||
this.$store.dispatch("form/submit").then((res) => {
|
||||
setTimeout(() => {
|
||||
update({ id: this.custom_form_id })
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "数据库同步成功",
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "数据库同步失败，请手动同步",
|
||||
});
|
||||
});
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState("form", ["selectedForm", "formList", "selectedIndex"]),
|
||||
},
|
||||
watch: {
|
||||
async dialogVisible(newVal) {
|
||||
if (newVal) {
|
||||
await this.$store.dispatch("form/getFormList", this.custom_form_id);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getConfig();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
|
||||
padding: 0 20px;
|
||||
}
|
||||
.type-item {
|
||||
min-width: 40px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
color: $primaryColor;
|
||||
border: solid 1px $primaryColor;
|
||||
border-radius: 0.4em;
|
||||
position: relative;
|
||||
transition: all 0.2s ease-out;
|
||||
|
||||
padding: 0.5em 1em;
|
||||
margin: 0.6em 1em;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: $primaryColor;
|
||||
}
|
||||
}
|
||||
::v-deep .el-dialog__headerbtn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px !important;
|
||||
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
height: calc(100% - 62px);
|
||||
padding: 8px 0 !important;
|
||||
}
|
||||
#template-dialog {
|
||||
::v-deep .el-dialog__header {
|
||||
box-shadow: none;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 30px 20px !important;
|
||||
}
|
||||
}
|
||||
::v-deep .ivu-split-trigger-vertical {
|
||||
width: 2px;
|
||||
}
|
||||
::v-deep .ivu-split-trigger-bar-con.vertical {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .ivu-split-horizontal > .ivu-split-trigger-con {
|
||||
width: 2px;
|
||||
}
|
||||
::v-deep .ivu-split-pane {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
ref="elDrawer"
|
||||
title="自定义字段"
|
||||
:visible.sync="isShow"
|
||||
size="49%"
|
||||
direction="rtl"
|
||||
>
|
||||
<template>
|
||||
<div class="btns">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
circle
|
||||
@click="$refs['xyTable'].getTableData(true)"
|
||||
></el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
@click="$refs['addField'].setForm(['custom_form_id'],[id]),$refs['addField'].setType('add'), $refs['addField'].show()"
|
||||
></el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
circle
|
||||
></el-button>
|
||||
</div>
|
||||
<xy-table
|
||||
:delay-req="true"
|
||||
:auths="['delete','edit']"
|
||||
:action="index"
|
||||
:destroy-action="destroy"
|
||||
:req-opt="{
|
||||
custom_form_id: id
|
||||
}"
|
||||
ref="xyTable"
|
||||
:height="400"
|
||||
style="margin: 0 10px"
|
||||
:table-item="table"
|
||||
@editor="row => {
|
||||
$refs['addField'].setType('editor');
|
||||
$refs['addField'].setId(row.id);
|
||||
$refs['addField'].show();
|
||||
}"
|
||||
@destroyed="row => {
|
||||
update({ id })
|
||||
}"
|
||||
>
|
||||
</xy-table>
|
||||
</template>
|
||||
</el-drawer>
|
||||
|
||||
<addField
|
||||
:z-index="zIndex"
|
||||
ref="addField"
|
||||
@refresh="refreshCallback"
|
||||
></addField>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { update } from "@/api/system/customForm"
|
||||
import { index,destroy } from "@/api/system/customFormField";
|
||||
|
||||
import addField from "./addField.vue";
|
||||
export default {
|
||||
components: {
|
||||
addField,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zIndex: 2001,
|
||||
select: {
|
||||
custom_form_id: this.id
|
||||
},
|
||||
id: null,
|
||||
isShow: false,
|
||||
|
||||
table: [
|
||||
{
|
||||
type: "index",
|
||||
width: 70,
|
||||
label: "编号",
|
||||
},
|
||||
{
|
||||
prop: "field",
|
||||
label: "字段标识",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
prop: "name",
|
||||
label: "名字",
|
||||
width: 160,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
index,destroy,update,
|
||||
show() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hidden() {
|
||||
this.isShow = false;
|
||||
},
|
||||
setId(id) {
|
||||
if (typeof id == "number") {
|
||||
this.id = id;
|
||||
} else {
|
||||
console.error("error typeof id: " + typeof id);
|
||||
}
|
||||
},
|
||||
getId() {
|
||||
return this.id;
|
||||
},
|
||||
refreshCallback() {
|
||||
this.$refs['xyTable'].getTableData()
|
||||
update({ id:this.id })
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
isShow: {
|
||||
handler: function (newVal) {
|
||||
if(newVal) {
|
||||
this.zIndex = Number(
|
||||
window
|
||||
.getComputedStyle(this.$refs["elDrawer"].$el)
|
||||
.getPropertyValue("z-index")
|
||||
)
|
||||
? Number(
|
||||
window
|
||||
.getComputedStyle(this.$refs["elDrawer"].$el)
|
||||
.getPropertyValue("z-index")
|
||||
) + 1
|
||||
: 2100;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['xyTable'].getTableData(true);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btns {
|
||||
margin: 0 10px 12px 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<script>
|
||||
import { domMap } from "@/const/inputType";
|
||||
import { templatePropsMap } from "@/const/templateProps";
|
||||
export default {
|
||||
props: {
|
||||
config: Object,
|
||||
index: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
optionsRender(h) {
|
||||
if (this.config.edit_input === "radio") {
|
||||
return ['选项1','选项2','选项3'].map(i => h('el-radio',{ label: i }, i))
|
||||
}
|
||||
if(this.config.edit_input === "checkbox") {
|
||||
return ['选项1','选项2','选项3'].map(i => h('el-checkbox',{ label: i }, i))
|
||||
}
|
||||
if(this.config.edit_input === "file" || this.config.edit_input === "files") {
|
||||
return [
|
||||
h('el-button',{
|
||||
slot: 'trigger',
|
||||
props: {
|
||||
size: 'small',
|
||||
type: 'primary'
|
||||
}
|
||||
}, '选取文件'),
|
||||
h('el-button',{
|
||||
style: {
|
||||
'margin-left': '10px'
|
||||
},
|
||||
props: {
|
||||
size: 'small',
|
||||
type: 'success'
|
||||
}
|
||||
}, '上传到服务器'),
|
||||
h('div',{
|
||||
class: 'el-upload__tip',
|
||||
slot: 'tip'
|
||||
},'文件不超过500kb')
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
render(h) {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
class: this.config.list_show ? "" : "no-list-show",
|
||||
style: {
|
||||
opacity: this.config.list_show ? 1 : 0.5,
|
||||
filter:
|
||||
this.index === this.$store.state.form.selectedIndex
|
||||
? "drop-shadow(0 0 2px #0077CCFF) drop-shadow(0 0 8px #449FD9FF)"
|
||||
: "",
|
||||
position: "relative",
|
||||
},
|
||||
},
|
||||
[
|
||||
h(domMap.get(this.config.edit_input), {
|
||||
style: {
|
||||
width: "100%",
|
||||
},
|
||||
props: templatePropsMap.get(this.config.edit_input),
|
||||
},this.optionsRender(h)),
|
||||
]
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.no-list-show {
|
||||
&::after {
|
||||
content: "隐藏";
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue