update order
This commit is contained in:
197
src/views/modules/pms/order/components/BaseSearchForm.vue
Normal file
197
src/views/modules/pms/order/components/BaseSearchForm.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="base-search-form">
|
||||
<div class="brand-color-line"><span style="">{{ headTitle }}</span></div>
|
||||
|
||||
<div class="actual-form">
|
||||
<el-form :inline="true" :model="dataForm" :rules="headConfig.rules">
|
||||
<!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
|
||||
<el-form-item
|
||||
v-for="(opt, index) in headConfig.fields"
|
||||
:key="opt.prop"
|
||||
:label="opt.label ? opt.label : null"
|
||||
:prop="opt.prop ?? '' + index"
|
||||
:rules="opt.bind?.rules ? opt.bind.rules : undefined"
|
||||
>
|
||||
<el-input v-if="opt.input" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small" />
|
||||
<el-select v-if="opt.select" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small">
|
||||
<el-option v-for="item in opt.select" :key="item.value + Math.random().toString()" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-date-picker v-if="opt.timerange" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable size="small" />
|
||||
<el-upload
|
||||
v-if="opt.upload"
|
||||
size="small"
|
||||
:key="'upload_' + Math.random().toString()"
|
||||
class="inline-block pl-3"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
>
|
||||
<el-button type="primary">上传文件</el-button>
|
||||
</el-upload>
|
||||
<el-button
|
||||
v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
|
||||
:key="'button' + Math.random().toString()"
|
||||
size="small"
|
||||
:type="opt.button.type"
|
||||
v-bind="opt.bind"
|
||||
@click="handleBtnClick(opt.button.name)"
|
||||
>{{ opt.button.name }}</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseSearchForm",
|
||||
props: {
|
||||
headConfig: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
headTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataForm: {},
|
||||
};
|
||||
},
|
||||
|
||||
// 这个 watch 出现得没啥必要......
|
||||
// watch: {
|
||||
// dataForm: {
|
||||
// handler: (val) => {
|
||||
// console.log("[BaseSearchForm::watcher::dataForm]", val);
|
||||
// },
|
||||
// deep: true,
|
||||
// },
|
||||
// },
|
||||
|
||||
created() {},
|
||||
mounted() {
|
||||
console.log("[BaseSearchForm] configs:", JSON.parse(JSON.stringify(this.headConfig)));
|
||||
|
||||
this.headConfig.fields.forEach((field, index) => {
|
||||
// 没有 field.prop ，则为按钮之类的
|
||||
if (!field.prop) return;
|
||||
|
||||
if (!this.dataForm[field.prop]) {
|
||||
this.$set(this.dataForm, field.prop, null);
|
||||
}
|
||||
|
||||
if (field.default) {
|
||||
// default 必须有个 value 属性！哪怕是 input 输入框
|
||||
this.dataForm[field.prop] = field.default.value;
|
||||
}
|
||||
|
||||
// 更新选项列表
|
||||
if (!field.watch && field.fn && typeof field.fn === "function") {
|
||||
const optionLabel = field.fieldOptionLabel;
|
||||
const optionValue = field.fieldOptionValue;
|
||||
// 设置自身的选项列表
|
||||
field.fn().then(({ data: res }) => {
|
||||
if (res.code === 0 && res.data) {
|
||||
// TODO: 此处需要随具体情况再做更新
|
||||
if ("list" in res.data) {
|
||||
this.$set(
|
||||
field,
|
||||
"select",
|
||||
res.data.list.map((item) => ({
|
||||
label: optionLabel ? item[optionLabel] : item.name,
|
||||
value: optionValue ? item[optionValue] : item.id,
|
||||
}))
|
||||
);
|
||||
}
|
||||
} else {
|
||||
this.$message({
|
||||
message: `${field.label} 数据获取出错: ${res.code} - ${res.msg}`,
|
||||
type: "error",
|
||||
duration: 1500,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 如果需要监听关联字段， field.watch ===> 需要watch的那个字段的 prop
|
||||
// TODO: 此处也需要修改，碰到具体业务需求才更新...
|
||||
if (field.watch) {
|
||||
// const { index: innerIdx, condition } = field.watch;
|
||||
// console.log("=====field.watch=====", innerIdx, this.searchForm[innerIdx], this.headConfig.fields[innerIdx].default);
|
||||
// // 设置监听器
|
||||
// this.$watch(
|
||||
// () => this.searchForm[innerIdx],
|
||||
// (val) => {
|
||||
// const queryParams = { [condition]: val };
|
||||
// // field.watch.condition.forEach(c => {
|
||||
// // queryParams
|
||||
// // })
|
||||
// this.$http(field.url, queryParams).then((res) => {
|
||||
// console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
|
||||
// // 此处是外部的 index
|
||||
// this.searchForm[index] = Math.floor(Math.random() * 10);
|
||||
// });
|
||||
// }
|
||||
// );
|
||||
// console.log("[BaseSearchForm] mounted(): ", this.searchForm);
|
||||
// // 如果此时已经有默认值了，就立马根据这个默认值来发起请求
|
||||
// if (this.searchForm[innerIdx]) {
|
||||
// // TODO: 这个判断好像不太需要...
|
||||
// console.log("TODO: 这个判断好像不太需要...");
|
||||
// } else {
|
||||
// console.log("TODO: 监听的字段还没来得及设置值呢...");
|
||||
// }
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleBtnClick(name) {
|
||||
this.$emit("btn-click", { btnName: name, payload: this.dataForm });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-search-form {
|
||||
/* display: flex; */
|
||||
/* align-items: center; */
|
||||
/* position: relative; */
|
||||
}
|
||||
|
||||
.brand-color-line {
|
||||
position: relative;
|
||||
/* background: red; */
|
||||
/* margin-top: 10px; */
|
||||
height: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.brand-color-line span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 2px 0;
|
||||
margin-left: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.brand-color-line::before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
background: #0b58ff;
|
||||
/* margin-right: 8px; */
|
||||
/* position: absolute; */
|
||||
}
|
||||
|
||||
.actual-form >>> .el-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user