# Conflicts: # .env.development # src/settings.js # vue.config.jsmaster
刘翔宇-旅管家
2 years ago
commit
aa96e22e05
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,50 @@
|
||||
import request from "@/utils/request";
|
||||
function customParamsSerializer(params) {
|
||||
let result = '';
|
||||
for (let key in params) {
|
||||
if (params.hasOwnProperty(key)) {
|
||||
if (Array.isArray(params[key])) {
|
||||
params[key].forEach((item,index) => {
|
||||
result += `${key}[${index}][key]=${item.key}&${key}[${index}][op]=${item.op}&${key}[${index}][value]=${item.value}&`;
|
||||
});
|
||||
} else {
|
||||
result += `${key}=${params[key]}&`;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result.slice(0, -1);
|
||||
}
|
||||
export function index(params,isLoading = false) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/base-form/index",
|
||||
params,
|
||||
paramsSerializer: customParamsSerializer,
|
||||
isLoading
|
||||
})
|
||||
}
|
||||
|
||||
export function show(params) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/base-form/show",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function save(data) {
|
||||
return request({
|
||||
method: "post",
|
||||
url: "/api/admin/base-form/save",
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function destroy(params) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/base-form/destroy",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function index(params,isLoading = false) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/custom-form/index",
|
||||
params,
|
||||
isLoading
|
||||
})
|
||||
}
|
||||
|
||||
export function show(params) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/custom-form/show",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function save(data) {
|
||||
return request({
|
||||
method: "post",
|
||||
url: "/api/admin/custom-form/save",
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function destroy(params) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/custom-form/destroy",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function config(params) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/custom-form/config",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function update(params) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/custom-form/update-table",
|
||||
params,
|
||||
isLoading:false
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function index(params,isLoading = false) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/custom-form-field/index",
|
||||
params,
|
||||
isLoading
|
||||
})
|
||||
}
|
||||
|
||||
export function show(params) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/custom-form-field/show",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function save(data) {
|
||||
return request({
|
||||
method: "post",
|
||||
url: "/api/admin/custom-form-field/save",
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function destroy(params) {
|
||||
return request({
|
||||
method: "get",
|
||||
url: "/api/admin/custom-form-field/destroy",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 44 KiB |
@ -0,0 +1,63 @@
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
auths:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
render(){
|
||||
let _this = this
|
||||
//权限排序后(让按钮排序)
|
||||
let temp = JSON.parse(JSON.stringify(this.auths))
|
||||
if(temp.indexOf('search') !== -1){
|
||||
console.log(temp.indexOf('search'))
|
||||
temp.splice(temp.indexOf('search'),1)
|
||||
temp.unshift('search')
|
||||
}
|
||||
|
||||
console.log(temp)
|
||||
return (
|
||||
<div style={
|
||||
{
|
||||
'display':'flex',
|
||||
'flex-warp':'wrap'
|
||||
}
|
||||
}>
|
||||
<div style={
|
||||
{
|
||||
'margin-right':'10px'
|
||||
}
|
||||
}>
|
||||
{ _this.$scopedSlots.default ? _this.$scopedSlots.default() : '' }
|
||||
</div>
|
||||
{
|
||||
temp.map((item,index) => {
|
||||
if(_this.$scopedSlots[item]){
|
||||
return (
|
||||
<div style={
|
||||
{
|
||||
'margin-right':'10px'
|
||||
}
|
||||
}>
|
||||
{ _this.$scopedSlots[item](item,index) }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
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: "颜色选择器",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,22 @@
|
||||
export const op = [
|
||||
{
|
||||
value: "like",
|
||||
label: "包含"
|
||||
},
|
||||
{
|
||||
value: "notlike",
|
||||
label: "不包含"
|
||||
},
|
||||
{
|
||||
value: "eq",
|
||||
label: "等于"
|
||||
},
|
||||
{
|
||||
value: "neq",
|
||||
label: "不等于"
|
||||
},
|
||||
{
|
||||
value: "range",
|
||||
label: "范围"
|
||||
}
|
||||
]
|
||||
@ -1,95 +1,104 @@
|
||||
<template>
|
||||
<div v-if="!item.hidden">
|
||||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
|
||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
</template>
|
||||
|
||||
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
|
||||
<template slot="title">
|
||||
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
|
||||
</template>
|
||||
<sidebar-item
|
||||
v-for="child in item.children"
|
||||
:key="child.path"
|
||||
:is-nest="true"
|
||||
:item="child"
|
||||
:base-path="resolvePath(child.path)"
|
||||
class="nest-menu"
|
||||
/>
|
||||
</el-submenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import path from 'path'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import Item from './Item'
|
||||
import AppLink from './Link'
|
||||
import FixiOSBug from './FixiOSBug'
|
||||
|
||||
export default {
|
||||
name: 'SidebarItem',
|
||||
components: { Item, AppLink },
|
||||
mixins: [FixiOSBug],
|
||||
props: {
|
||||
// route object
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
|
||||
// TODO: refactor with render function
|
||||
this.onlyOneChild = null
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
hasOneShowingChild(children = [], parent) {
|
||||
const showingChildren = children.filter(item => {
|
||||
if (item.hidden) {
|
||||
return false
|
||||
} else {
|
||||
// Temp set(will be used if only has one showing child)
|
||||
this.onlyOneChild = item
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
// When there is only one child router, the child router is displayed by default
|
||||
if (showingChildren.length === 1) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Show parent if there are no child router to display
|
||||
if (showingChildren.length === 0) {
|
||||
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
resolvePath(routePath) {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath
|
||||
}
|
||||
if (isExternal(this.basePath)) {
|
||||
return this.basePath
|
||||
}
|
||||
return path.resolve(this.basePath, routePath)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div v-if="!item.hidden">
|
||||
<template
|
||||
v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
|
||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
</template>
|
||||
|
||||
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
|
||||
<template slot="title">
|
||||
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
|
||||
</template>
|
||||
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
|
||||
:base-path="resolvePath(child.path)" class="nest-menu" />
|
||||
</el-submenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import path from 'path'
|
||||
import {
|
||||
isExternal
|
||||
} from '@/utils/validate'
|
||||
import Item from './Item'
|
||||
import AppLink from './Link'
|
||||
import FixiOSBug from './FixiOSBug'
|
||||
|
||||
export default {
|
||||
name: 'SidebarItem',
|
||||
components: {
|
||||
Item,
|
||||
AppLink
|
||||
},
|
||||
mixins: [FixiOSBug],
|
||||
props: {
|
||||
// route object
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
|
||||
// TODO: refactor with render function
|
||||
this.onlyOneChild = null
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
hasOneShowingChild(children = [], parent) {
|
||||
const showingChildren = children.filter(item => {
|
||||
if (item.hidden) {
|
||||
return false
|
||||
} else {
|
||||
// Temp set(will be used if only has one showing child)
|
||||
this.onlyOneChild = item
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
// When there is only one child router, the child router is displayed by default
|
||||
if (showingChildren.length === 1) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Show parent if there are no child router to display
|
||||
if (showingChildren.length === 0) {
|
||||
this.onlyOneChild = {
|
||||
...parent,
|
||||
path: '',
|
||||
noShowingChildren: true
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
resolvePath(routePath) {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath
|
||||
}
|
||||
if (isExternal(this.basePath)) {
|
||||
return this.basePath
|
||||
}
|
||||
return path.resolve(this.basePath, routePath)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-submenu__title i {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
export const authMixin = {
|
||||
data(){
|
||||
return {
|
||||
auths_auth_mixin:[],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(this.$route.meta?.auths?.length > 0 && this.$route.meta.auths[0]){
|
||||
this.auths_auth_mixin = this.$route.meta.auths
|
||||
}
|
||||
console.log(this.auths_auth_mixin)
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,4 +1,4 @@
|
||||
@import '~view-design/src/styles/index.less';
|
||||
|
||||
// Here are the variables to cover, such as:
|
||||
@primary-color: #444140;
|
||||
@primary-color: #0077CC;
|
||||
|
||||
@ -0,0 +1,245 @@
|
||||
<script>
|
||||
import { save, show } from "@/api/system/baseForm";
|
||||
import { getparameter } from "@/api/system/dictionary";
|
||||
export default {
|
||||
props: {
|
||||
formInfo: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableName: String
|
||||
},
|
||||
render(h) {
|
||||
let domMap = new Map([
|
||||
['text', 'el-input'],
|
||||
['textarea', 'el-input'],
|
||||
['checkbox', 'el-select'],
|
||||
['date', 'el-date-picker'],
|
||||
['datetime', 'el-time-select']
|
||||
])
|
||||
let typeMap = new Map([
|
||||
['text', ''],
|
||||
['textarea', 'textarea'],
|
||||
['checkbox', ''],
|
||||
['date', 'date'],
|
||||
['datetime', '']
|
||||
])
|
||||
return h(
|
||||
"el-dialog",
|
||||
{
|
||||
props: {
|
||||
title: "新增",
|
||||
visible: this.dialogVisible,
|
||||
width: "30%",
|
||||
},
|
||||
on: {
|
||||
"update:visible": (val) => {
|
||||
this.dialogVisible = val;
|
||||
},
|
||||
},
|
||||
},
|
||||
[
|
||||
h(
|
||||
"el-form",
|
||||
{
|
||||
ref: "elForm",
|
||||
props: {
|
||||
model: this.form,
|
||||
labelWidth: "80px",
|
||||
rules: this.rules,
|
||||
labelPosition: "right",
|
||||
size: "small"
|
||||
},
|
||||
},
|
||||
this.formInfo.map((i,index) => {
|
||||
return h("el-form-item",{
|
||||
ref: `elFormItem${i.field}`,
|
||||
props: {
|
||||
label: i.name,
|
||||
prop: i.field
|
||||
}
|
||||
},[
|
||||
h(domMap.get(i.edit_input),{
|
||||
props: {
|
||||
value: this.form[i.field],
|
||||
type: typeMap.get(i.edit_input),
|
||||
placeholder: `请填写${i.name}`,
|
||||
valueFormat: (() => {
|
||||
if(i.edit_input === 'date') {
|
||||
return 'yyyy-MM-dd'
|
||||
}
|
||||
})(),
|
||||
},
|
||||
attrs: {
|
||||
placeholder: `请填写${i.name}`
|
||||
},
|
||||
on: {
|
||||
['input']:e => {
|
||||
if(i.field) {
|
||||
this.form[i.field] = e
|
||||
this.form = Object.assign({}, this.form)
|
||||
}
|
||||
}
|
||||
}
|
||||
},(i.edit_input === 'checkbox' && i.paramters) ? i.paramters.map(param => {
|
||||
return h('el-option',{
|
||||
props: {
|
||||
label: param.value,
|
||||
value: param.id,
|
||||
key: param.id
|
||||
}
|
||||
})
|
||||
}) : '')
|
||||
])
|
||||
})
|
||||
),
|
||||
h("template", { slot: "footer" }, [
|
||||
h(
|
||||
"el-button",
|
||||
{
|
||||
on: {
|
||||
click: () => (this.dialogVisible = false),
|
||||
},
|
||||
},
|
||||
"取消"
|
||||
),
|
||||
h(
|
||||
"el-button",
|
||||
{
|
||||
props: {
|
||||
type: 'warning',
|
||||
plain: true
|
||||
},
|
||||
on: {
|
||||
click: () => (this.init()),
|
||||
},
|
||||
},
|
||||
"重置"
|
||||
),
|
||||
h(
|
||||
"el-button",
|
||||
{
|
||||
props: {
|
||||
type: "primary",
|
||||
},
|
||||
on: {
|
||||
click: this.submit
|
||||
},
|
||||
},
|
||||
"确定"
|
||||
),
|
||||
]),
|
||||
]
|
||||
);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
type: "add",
|
||||
dialogVisible: false,
|
||||
form: {},
|
||||
rules: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
for(let key in this.form) {
|
||||
this.form[key] = ""
|
||||
}
|
||||
this.$refs["elForm"].clearValidate()
|
||||
},
|
||||
show() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
hidden() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
setType(type = "add") {
|
||||
let types = ["add", "editor"];
|
||||
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.form = Object.assign({}, this.form);
|
||||
},
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
this.$refs['elForm'].validate(validate => {
|
||||
if(validate) {
|
||||
console.log(this.form)
|
||||
save(Object.assign(this.form, { table_name: this.tableName })).then(res => {
|
||||
this.$Message.success({
|
||||
content: `${this.type === 'add' ? '新增' : '编辑'}成功`
|
||||
})
|
||||
this.$emit("refresh")
|
||||
this.hidden();
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
formInfo: {
|
||||
handler: function (newVal) {
|
||||
this.form = {};
|
||||
this.rules = {}
|
||||
newVal.forEach(i => {
|
||||
if(i.field) {
|
||||
this.form[i.field] = "";
|
||||
this.rules[i.field] = [{ required:true,message: `请填写${i.name}` }]
|
||||
|
||||
if(i.edit_input === 'checkbox' && i.parameter_id) {
|
||||
getparameter({ id: i.parameter_id }).then(res => {
|
||||
i.paramters = res.detail ?? []
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//immediate: true,
|
||||
},
|
||||
dialogVisible(val) {
|
||||
if (val) {
|
||||
if (this.type === "editor") {
|
||||
this.$nextTick(() => this.getDetail())
|
||||
}
|
||||
} else {
|
||||
this.id = "";
|
||||
this.type = "";
|
||||
this.init();
|
||||
this.$refs["elForm"].clearValidate();
|
||||
delete this.form.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" :text="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="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: [],
|
||||
title:"",
|
||||
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
|
||||
this.title=this.$route.meta.title;
|
||||
}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>
|
||||
@ -0,0 +1,159 @@
|
||||
<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,96 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="自定义表单" 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" @click="$refs['addForm'].type = 'add',$refs['addForm'].show()">新增</Button>
|
||||
</div>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table
|
||||
ref="xyTable"
|
||||
:auths="auths_auth_mixin"
|
||||
:action="index"
|
||||
:destroy-action="destroy"
|
||||
:border="true"
|
||||
:table-item="table"
|
||||
@editor="row => {
|
||||
$refs['addForm'].setType('editor');
|
||||
$refs['addForm'].setId(row.id);
|
||||
$refs['addForm'].show();
|
||||
}">
|
||||
<template #setting="scope">
|
||||
<Button type="primary"
|
||||
size="small"
|
||||
@click="$refs['formFields'].setId(scope.row.id),$refs['formFields'].show()">字段</Button>
|
||||
</template>
|
||||
</xy-table>
|
||||
|
||||
<addForm ref="addForm" @refresh="$refs['xyTable'].getTableData()"></addForm>
|
||||
|
||||
<formFields ref="formFields"></formFields>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index,destroy } from '@/api/system/customForm'
|
||||
import { authMixin } from "@/mixin/authMixin";
|
||||
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
import addForm from "./components/addForm.vue";
|
||||
import formFields from "./components/formFields.vue";
|
||||
export default {
|
||||
components:{
|
||||
LxHeader,addForm,formFields
|
||||
|
||||
},
|
||||
mixins: [authMixin],
|
||||
data() {
|
||||
return {
|
||||
select:{
|
||||
page:1,
|
||||
page_size:10
|
||||
},
|
||||
list:[],
|
||||
table:[
|
||||
{
|
||||
type: 'index',
|
||||
label:'编号',
|
||||
width:100
|
||||
},
|
||||
{
|
||||
prop:'table_name',
|
||||
label:'表名',
|
||||
width:180,
|
||||
sortable:'custom',
|
||||
},
|
||||
{
|
||||
prop:'name',
|
||||
label:'名称',
|
||||
width:200,
|
||||
sortable:'custom',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
index,destroy,
|
||||
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue