update BaseSearchForm

This commit is contained in:
lb 2023-01-29 16:52:37 +08:00
parent a4698d207d
commit e0d2dc189e
7 changed files with 375 additions and 219 deletions

View File

@ -0,0 +1,181 @@
<template>
<el-row class="base-search-form">
<div class="brand-color-line"></div>
<el-form :inline="true" :model="searchForm" :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="'' + index"
:rules="opt.bind?.rules ? opt.bind.rules : undefined"
>
<el-input
v-if="opt.input"
v-model="searchForm[index]"
v-bind="opt.bind"
/>
<el-select
v-if="opt.select"
v-model="searchForm[index]"
v-bind="opt.bind"
>
<el-option
v-for="item in opt.select"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-date-picker
v-if="opt.timerange"
v-model="searchForm[index]"
v-bind="opt.bind"
/>
<el-upload
v-if="opt.upload"
: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()"
:type="opt.button.type"
@click="handleBtnClick(opt.button.name)"
>{{ opt.button.name }}</el-button
>
</el-form-item>
</el-form>
</el-row>
</template>
<script>
export default {
name: "",
props: {
headConfig: {
type: Object,
default: () => ({}),
},
},
data() {
return {
searchForm: {
// 10
0: null, //
1: null,
2: null,
3: null,
4: null,
5: null,
6: null,
7: null,
8: null,
9: null,
},
};
},
watch: {
searchForm: {
handler: (val) => {
console.log("new val", val);
},
deep: true,
},
},
created() {},
mounted() {
console.log(
"head form config",
JSON.parse(JSON.stringify(this.headConfig))
);
this.headConfig.fields.forEach((field, index) => {
if (field.default) {
// default value input
this.searchForm[index] = field.default.value;
}
//
if (!field.watch && field.fn && typeof field.fn === "function") {
//
field.fn().then((res) => {
field.select = res.map((_) => {
//
if (_.default) {
this.searchForm[index] = _.value;
}
return _;
});
console.log("[update] 更新选项列表", res, field.select);
});
}
//
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.searchForm });
},
},
};
</script>
<style scoped>
.base-search-form {
display: flex;
/* align-items: center; */
/* position: relative; */
}
.brand-color-line {
display: inline-block;
height: 20px;
width: 6px;
margin-right: 8px;
margin-top: 10px;
border-radius: 2px;
background: #0b58ff;
/* position: absolute; */
}
</style>

View File

@ -1,188 +1,154 @@
<template>
<el-row class="base-search-form">
<div class="brand-color-line"></div>
<el-form :inline="true" :model="searchForm" :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="'' + index"
:rules="opt.bind?.rules ? opt.bind.rules : undefined"
>
<el-input
v-if="opt.input"
v-model="searchForm[index]"
v-bind="opt.bind"
/>
<el-select
v-if="opt.select"
v-model="searchForm[index]"
v-bind="opt.bind"
>
<el-option
v-for="item in opt.select"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-date-picker
v-if="opt.timerange"
v-model="searchForm[index]"
v-bind="opt.bind"
/>
<el-upload
v-if="opt.upload"
: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()"
:type="opt.button.type"
@click="handleBtnClick(opt.button.name)"
>{{ opt.button.name }}</el-button
>
</el-form-item>
</el-form>
</el-row>
<el-row class="base-search-form">
<div class="brand-color-line"></div>
<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 />
<el-select v-if="opt.select" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable>
<el-option v-for="item in opt.select" :key="item.value" :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 />
<el-upload
v-if="opt.upload"
: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()"
:type="opt.button.type"
@click="handleBtnClick(opt.button.name)"
>{{ opt.button.name }}</el-button
>
</el-form-item>
</el-form>
</el-row>
</template>
<script>
export default {
name: "",
props: {
headConfig: {
type: Object,
default: () => ({}),
},
},
data() {
return {
searchForm: {
// 10
0: null, //
1: null,
2: null,
3: null,
4: null,
5: null,
6: null,
7: null,
8: null,
9: null,
},
};
},
name: "",
props: {
headConfig: {
type: Object,
default: () => ({}),
},
},
data() {
return {
dataForm: {},
};
},
watch: {
searchForm: {
handler: (val) => {
console.log("new val", val);
},
deep: true,
},
},
created() {},
mounted() {
console.log(
"head form config",
JSON.parse(JSON.stringify(this.headConfig))
);
this.headConfig.fields.forEach((field, index) => {
if (field.default) {
// default value input
this.searchForm[index] = field.default.value;
}
// watch ......
// watch: {
// dataForm: {
// handler: (val) => {
// console.log("[BaseSearchForm::watcher::dataForm]", val);
// },
// deep: true,
// },
// },
//
if (!field.watch && field.fn && typeof field.fn === "function") {
//
field.fn().then((res) => {
field.select = res.map((_) => {
//
if (_.default) {
this.searchForm[index] = _.value;
}
return _;
});
console.log("[update] 更新选项列表", res, field.select);
});
}
created() {},
mounted() {
console.log("[BaseSearchForm] configs:", JSON.parse(JSON.stringify(this.headConfig)));
// :
const axios = function(url, data) {
return new Promise((resolve) => {
resolve("success");
});
};
this.headConfig.fields.forEach((field, index) => {
// field.prop
if (!field.prop) return;
//
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
// })
axios(field.url, queryParams).then((res) => {
console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
// index
this.searchForm[index] = Math.floor(Math.random() * 10);
});
}
);
if (!this.dataForm[field.prop]) {
this.$set(this.dataForm, field.prop, null);
}
console.log("xxxxxxxxxx", this.searchForm);
//
if (this.searchForm[innerIdx]) {
// TODO: ...
console.log("TODO: 这个判断好像不太需要...");
} else {
console.log("TODO: 监听的字段还没来得及设置值呢...");
}
}
});
},
methods: {
handleBtnClick(name) {
this.$emit("btn-click", { btnName: name, payload: null });
},
},
if (field.default) {
// default value input
this.dataForm[field.prop] = field.default.value;
}
//
if (!field.watch && field.fn && typeof field.fn === "function") {
//
field.fn().then(({ data: res }) => {
if (res.code === 0 && res.data) {
// TODO:
field.select = res.map((_) => {
//
if (_.default) {
this.searchForm[index] = _.value;
}
return _;
});
console.log("[update] 更新选项列表", res, field.select);
}
});
}
// 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; */
display: flex;
/* align-items: center; */
/* position: relative; */
}
.brand-color-line {
display: inline-block;
height: 20px;
width: 6px;
margin-right: 8px;
margin-top: 10px;
border-radius: 2px;
background: #0b58ff;
/* position: absolute; */
display: inline-block;
height: 20px;
width: 6px;
margin-right: 8px;
margin-top: 10px;
border-radius: 2px;
background: #0b58ff;
/* position: absolute; */
}
</style>

View File

@ -1,47 +1,69 @@
// import i18n from '@/i18n'
export default {
name: 'StatusComponent',
name: "StatusComponent",
props: {
injectData: {
type: Object,
default: () => ({})
}
default: () => ({}),
},
},
data() {
return {
statusText: [
'正常',
'异常',
'损坏',
"正常",
"异常",
"损坏",
// more...
],
statusType: [
'success',
'warning',
'danger',
"success",
"warning",
"danger",
// more...
]
}
],
};
},
computed: {
isEnabled() {
return this.injectData && (this.injectData.enabled === 1 || this.injectData.enabled.toString() === '1')
// isEnabled() {
// return (
// this.injectData &&
// (this.injectData[this.injectData.head.prop ?? "enabled"] === 1 ||
// this.injectData[this.injectData.head.prop ?? "enabled"].toString() === "1")
// );
// },
propValue() {
return this.injectData[this.injectData.head.prop ?? "enabled"] ?? 9527
},
type() {
if (this.propValue === 9527) {
return 'danger'
}
return this.statusType[this.propValue]
},
text() {
if (this.propValue === 9527) {
return '未知状态'
}
return this.statusText[this.propValue]
}
},
mounted() {
console.log('[component] StatusComponent: ', this.injectData)
// console.log("[component] StatusComponent: ", this.injectData);
},
methods: {
// 发射事件
emit(opt) { }
emit(opt) { },
},
render: function (h) {
return h('el-tag',
return h(
"el-tag",
{
props:
{ size: 'small', type: this.isEnabled ? this.statusType[0] : this.statusType[1] }
// props: { size: "small", type: this.isEnabled ? this.statusType[0] : this.statusType[1] },
props: { size: "small", type: this.type },
},
this.isEnabled ? this.statusText[0] : this.statusText[1])
}
}
// this.isEnabled ? this.statusText[0] : this.statusText[1]
this.text
);
},
};

View File

@ -17,7 +17,7 @@ const http = axios.create({
http.interceptors.request.use(config => {
config.headers['Accept-Language'] = Cookies.get('language') || 'zh-CN'
config.headers['token'] = Cookies.get('token') || ''
console.log('[request interceptor] token is:', config.headers['token'])
// console.log('[request interceptor] token is:', config.headers['token'])
// 默认参数
var defaults = {}
// 防止缓存GET请求默认带_t参数

View File

@ -103,23 +103,22 @@ export default {
},
/** 获取 列表数据 */
getList(listQuery = null) {
getList(queryParams) {
this.tableLoading = true;
if (!listQuery) {
listQuery = {};
listQuery.page = this.page;
listQuery.size = this.size;
}
const params = {
page: listQuery.page,
limit: listQuery.size,
};
if (this.listQueryExtra.length) {
const params = queryParams
? { ...queryParams, page: this.page, limit: this.size }
: {
page: this.page,
limit: this.size,
};
if (!queryParams && this.listQueryExtra.length) {
this.listQueryExtra.map((name) => {
params[name] = "";
});
}
this.$http
.get(this.urls.page, {
params,
@ -207,8 +206,10 @@ export default {
case "新增":
this.openDialog();
break;
case "查询":
case "查询": {
this.getList(payload);
break;
}
}
},

View File

@ -24,6 +24,7 @@ export default function () {
const headFormFields = [
{
prop: 'key',
label: "产线名称/编码",
input: true,
default: { value: "" },

View File

@ -7,28 +7,13 @@ import initConfig from './config';
import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
export default {
name: 'BlenderView',
name: 'ProductionLineView',
components: { ListViewWithHead },
provide() {
return {
urls: this.allUrls
}
}
// urls: {
// type: Object,
// required: true,
// default: () => ({
// /** url **/ list: null,
// /** url **/ page: null,
// /** url **/ edit: null,
// /** url **/ delete: null,
// /** url **/ detail: null,
// /** url **/ export: null,
// /** url **/ import: null,
// /** url **/ other: null,
// }),
// },
,
},
data() {
const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
return {