|
@@ -3,95 +3,33 @@
|
|
|
<template v-if="title">
|
|
|
<div class="title">{{ title }}</div>
|
|
|
</template>
|
|
|
- <el-form
|
|
|
- ref="form"
|
|
|
- class="form"
|
|
|
- :model="formData"
|
|
|
- >
|
|
|
- <el-form-item
|
|
|
- v-for="item in formItems"
|
|
|
- :key="item.prop"
|
|
|
- :prop="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :style="{
|
|
|
+ <el-form ref="form" class="form" :model="formData">
|
|
|
+ <el-form-item v-for="item in formItems" :key="item.prop" :prop="item.prop" :label="item.label" :style="{
|
|
|
width: item.width || '120px'
|
|
|
- }"
|
|
|
- >
|
|
|
+ }">
|
|
|
<template v-if="item.inputType === 'input'">
|
|
|
- <el-input
|
|
|
- v-model="formData[item.prop]"
|
|
|
- :size="item.size || 'small'"
|
|
|
- :placeholder="item.placeholder || '请输入'"
|
|
|
- :clearable="item.clearable"
|
|
|
- />
|
|
|
+ <el-input v-model="formData[item.prop]" :size="item.size || 'small'" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable" />
|
|
|
</template>
|
|
|
<template v-if="item.inputType === 'select'">
|
|
|
- <el-select
|
|
|
- v-model="formData[item.prop]"
|
|
|
- :filterable="item.filterable"
|
|
|
- :default-first-option="item.filterable"
|
|
|
- :size="item.size || 'small'"
|
|
|
- :placeholder="item.placeholder || '请选择'"
|
|
|
- :multiple="item.multiple"
|
|
|
- :collapse-tags="item.multiple"
|
|
|
- :clearable="item.clearable"
|
|
|
- :disabled="item.disabled"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="option in item.options"
|
|
|
- :key="option.value"
|
|
|
- :value="option.value"
|
|
|
- :label="option.label"
|
|
|
- />
|
|
|
+ <el-select v-model="formData[item.prop]" :filterable="item.filterable" :default-first-option="item.filterable" :size="item.size || 'small'" :placeholder="item.placeholder || '请选择'" :multiple="item.multiple" :collapse-tags="item.multiple" :clearable="item.clearable" :disabled="item.disabled">
|
|
|
+ <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label" />
|
|
|
</el-select>
|
|
|
</template>
|
|
|
<template v-if="item.inputType === 'datePicker'">
|
|
|
- <el-date-picker
|
|
|
- @change="dateup"
|
|
|
- v-model="formData[item.prop]"
|
|
|
- :size="item.size || 'small'"
|
|
|
- type="daterange"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- />
|
|
|
+ <el-date-picker @change="dateup" v-model="formData[item.prop]" :size="item.size || 'small'" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
</template>
|
|
|
<template v-if="item.inputType === 'cascader'">
|
|
|
- <el-cascader
|
|
|
- v-model="formData[item.prop]"
|
|
|
- :size="item.size || 'small'"
|
|
|
- :placeholder="item.placeholder || '请选择'"
|
|
|
- :options="item.options"
|
|
|
- :props="item.props"
|
|
|
- :clearable="item.clearable"
|
|
|
- :disabled="item.disabled"
|
|
|
- />
|
|
|
+ <el-cascader v-model="formData[item.prop]" :size="item.size || 'small'" :placeholder="item.placeholder || '请选择'" :options="item.options" :props="item.props" :clearable="item.clearable" :disabled="item.disabled" />
|
|
|
</template>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="formItems.length">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="getData"
|
|
|
- >{{ buttonText }}</el-button
|
|
|
- >
|
|
|
+ <el-button type="primary" size="small" @click="getData">{{ buttonText }}</el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="withExport">
|
|
|
- <img
|
|
|
- src="../../../assets/nav/ic_export.png"
|
|
|
- title="导出"
|
|
|
- class="btn-icon-only"
|
|
|
- @click="exportClickHandler"
|
|
|
- />
|
|
|
+ <img src="../../../assets/nav/ic_export.png" title="导出" class="btn-icon-only" @click="exportClickHandler" />
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="withSetting">
|
|
|
- <img
|
|
|
- src="../../../assets/nav/ic_setting.png"
|
|
|
- title="节点设置"
|
|
|
- class="btn-icon-only"
|
|
|
- @click="settingClickHandler"
|
|
|
- />
|
|
|
+ <img src="../../../assets/nav/ic_setting.png" title="节点设置" class="btn-icon-only" @click="settingClickHandler" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
@@ -132,7 +70,7 @@ export default {
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
formData: {
|
|
|
range: '',
|
|
@@ -175,7 +113,7 @@ export default {
|
|
|
label: '航站楼'
|
|
|
}
|
|
|
],
|
|
|
- changeHandler(value) {
|
|
|
+ changeHandler (value) {
|
|
|
this.setInOrOutOptions(value)
|
|
|
const rangeMap = {
|
|
|
航线: 'airline',
|
|
@@ -287,27 +225,27 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(['savedFormDataMap']),
|
|
|
- formDataObj() {
|
|
|
+ formDataObj () {
|
|
|
return JSON.parse(JSON.stringify(this.formData))
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
items: {
|
|
|
- handler(val) {
|
|
|
+ handler (val) {
|
|
|
val && (this.formItems = val)
|
|
|
},
|
|
|
deep: true,
|
|
|
immediate: true
|
|
|
},
|
|
|
data: {
|
|
|
- handler(val) {
|
|
|
+ handler (val) {
|
|
|
val && (this.formData = val)
|
|
|
},
|
|
|
deep: true,
|
|
|
immediate: true
|
|
|
},
|
|
|
formDataObj: {
|
|
|
- handler(val, oldVal) {
|
|
|
+ handler (val, oldVal) {
|
|
|
this.formItems.forEach(item => {
|
|
|
if (item.changeHandler && String(val[item.prop]) !== String(oldVal[item.prop])) {
|
|
|
item.changeHandler.call(this, val[item.prop])
|
|
@@ -317,7 +255,7 @@ export default {
|
|
|
deep: true
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
+ created () {
|
|
|
this.customItems.forEach(item => {
|
|
|
if (typeof item.itemIndex === 'number') {
|
|
|
if (item.prop) {
|
|
@@ -332,7 +270,7 @@ export default {
|
|
|
const savedFormData = this.savedFormDataMap[this.$route.name]
|
|
|
this.formItems.forEach(item => {
|
|
|
if (item.queryId && item.setKey) {
|
|
|
- this.getOptions(item.queryId, item.setKey, item.prop,item.coy)
|
|
|
+ this.getOptions(item.queryId, item.setKey, item.prop, item.coy)
|
|
|
}
|
|
|
if (savedFormData?.[item.prop]) {
|
|
|
this.formData[item.prop] = savedFormData[item.prop]
|
|
@@ -344,18 +282,17 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
dateup (value) {
|
|
|
- debugger
|
|
|
let arr = {
|
|
|
- fd1:value[0],
|
|
|
- fd2:value[1],
|
|
|
+ fd1: value[0],
|
|
|
+ fd2: value[1],
|
|
|
}
|
|
|
this.formItems.forEach(item => {
|
|
|
- if (item.queryId && item.setKey) {
|
|
|
- this.getOptions(item.queryId, item.setKey, item.prop,arr)
|
|
|
- }
|
|
|
- })
|
|
|
+ if (item.queryId && item.setKey) {
|
|
|
+ this.getOptions(item.queryId, item.setKey, item.prop, arr)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- getData() {
|
|
|
+ getData () {
|
|
|
try {
|
|
|
this.formItems.forEach(item => {
|
|
|
if (item.requiredWarning && (!this.formData[item.prop] || this.formData[item.prop].length === 0)) {
|
|
@@ -381,13 +318,13 @@ export default {
|
|
|
formData: this.formData
|
|
|
})
|
|
|
},
|
|
|
- exportClickHandler() {
|
|
|
+ exportClickHandler () {
|
|
|
this.$emit('export')
|
|
|
},
|
|
|
- settingClickHandler() {
|
|
|
+ settingClickHandler () {
|
|
|
this.$emit('setting')
|
|
|
},
|
|
|
- setInOrOutOptions(range) {
|
|
|
+ setInOrOutOptions (range) {
|
|
|
const theInOrOutItem = this.formItems.find(item => item.prop === 'inOrOut')
|
|
|
switch (range) {
|
|
|
case '全部':
|
|
@@ -432,7 +369,7 @@ export default {
|
|
|
break
|
|
|
}
|
|
|
},
|
|
|
- async getOptions(queryId, setKey, prop,cop) {
|
|
|
+ async getOptions (queryId, setKey, prop, cop) {
|
|
|
try {
|
|
|
const { code, returnData, message } = await TempQuery({
|
|
|
serviceId: queryId,
|
|
@@ -473,12 +410,12 @@ export default {
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
font-size: 18px;
|
|
|
- font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ font-family: Helvetica, "Microsoft YaHei";
|
|
|
font-weight: bold;
|
|
|
white-space: nowrap;
|
|
|
position: relative;
|
|
|
&::before {
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
width: 4px;
|
|
|
height: 20px;
|
|
|
background: #2d67e3;
|
|
@@ -511,7 +448,7 @@ export default {
|
|
|
}
|
|
|
.el-input__inner {
|
|
|
border-radius: 4px;
|
|
|
- font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ font-family: Helvetica, "Microsoft YaHei";
|
|
|
color: #303133;
|
|
|
border-color: #ffffff;
|
|
|
&:hover {
|
|
@@ -530,7 +467,7 @@ export default {
|
|
|
border-radius: 4px;
|
|
|
border-color: #ffffff;
|
|
|
color: #303133;
|
|
|
- font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ font-family: Helvetica, "Microsoft YaHei";
|
|
|
&:hover {
|
|
|
border-color: #c0c4cc;
|
|
|
}
|
|
@@ -548,10 +485,10 @@ export default {
|
|
|
.el-cascader {
|
|
|
.el-input {
|
|
|
.el-icon-arrow-up::before {
|
|
|
- content: '\e78f';
|
|
|
+ content: "\e78f";
|
|
|
}
|
|
|
.el-icon-arrow-down::before {
|
|
|
- content: '\e790';
|
|
|
+ content: "\e790";
|
|
|
}
|
|
|
&:not(.is-disabled) {
|
|
|
.el-input__icon,
|
|
@@ -563,7 +500,7 @@ export default {
|
|
|
}
|
|
|
.el-button {
|
|
|
border-radius: 4px;
|
|
|
- font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ font-family: Helvetica, "Microsoft YaHei";
|
|
|
}
|
|
|
.btn-icon-only {
|
|
|
width: 32px;
|