mt-fe-group/pms-aomei
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update BaseSearchForm

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/components/BaseSearchForm copy.vue Normal file
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>

302
src/components/BaseSearchForm.vue
View File

@ -1,188 +1,154 @@
<template> <template>
<el-row class="base-search-form"> <el-row class="base-search-form">
<div class="brand-color-line"></div> <div class="brand-color-line"></div>
<el-form :inline="true" :model="searchForm" :rules="headConfig.rules"> <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-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
<el-form-item <el-form-item
v-for="(opt, index) in headConfig.fields" v-for="(opt, index) in headConfig.fields"
:key="opt.prop" :key="opt.prop"
:label="opt.label ? opt.label : null" :label="opt.label ? opt.label : null"
:prop="'' + index" :prop="opt.prop ?? '' + index"
:rules="opt.bind?.rules ? opt.bind.rules : undefined" :rules="opt.bind?.rules ? opt.bind.rules : undefined"
> >
<el-input <el-input v-if="opt.input" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable />
v-if="opt.input" <el-select v-if="opt.select" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable>
v-model="searchForm[index]" <el-option v-for="item in opt.select" :key="item.value" :label="item.label" :value="item.value" />
v-bind="opt.bind" </el-select>
/> <el-date-picker v-if="opt.timerange" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable />
<el-select <el-upload
v-if="opt.select" v-if="opt.upload"
v-model="searchForm[index]" :key="'upload_' + Math.random().toString()"
v-bind="opt.bind" class="inline-block pl-3"
> action="https://jsonplaceholder.typicode.com/posts/"
<el-option >
v-for="item in opt.select" <el-button type="primary">上传文件</el-button>
:key="item.value" </el-upload>
:label="item.label" <el-button
:value="item.value" v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
/> :key="'button' + Math.random().toString()"
</el-select> :type="opt.button.type"
<el-date-picker @click="handleBtnClick(opt.button.name)"
v-if="opt.timerange" >{{ opt.button.name }}</el-button
v-model="searchForm[index]" >
v-bind="opt.bind" </el-form-item>
/> </el-form>
<el-upload </el-row>
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> </template>
<script> <script>
export default { export default {
name: "", name: "",
props: { props: {
headConfig: { headConfig: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}, },
data() { data() {
return { return {
searchForm: { dataForm: {},
// 最大参数个数：10个，不够则在这里加 };
0: null, // 参数一 },
1: null,
2: null,
3: null,
4: null,
5: null,
6: null,
7: null,
8: null,
9: null,
},
};
},
watch: { // 这个 watch 出现得没啥必要......
searchForm: { // watch: {
handler: (val) => { // dataForm: {
console.log("new val", val); // handler: (val) => {
}, // console.log("[BaseSearchForm::watcher::dataForm]", val);
deep: true, // },
}, // 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;
}
// 更新选项列表 created() {},
if (!field.watch && field.fn && typeof field.fn === "function") { mounted() {
// 设置自身的选项列表 console.log("[BaseSearchForm] configs:", JSON.parse(JSON.stringify(this.headConfig)));
field.fn().then((res) => {
field.select = res.map((_) => {
// 找到默认项
if (_.default) {
this.searchForm[index] = _.value;
}
return _;
});
console.log("[update] 更新选项列表", res, field.select);
});
}
// 模拟请求: this.headConfig.fields.forEach((field, index) => {
const axios = function(url, data) { // 没有 field.prop ，则为按钮之类的
return new Promise((resolve) => { if (!field.prop) return;
resolve("success");
});
};
// 如果需要监听关联字段 if (!this.dataForm[field.prop]) {
if (field.watch) { this.$set(this.dataForm, field.prop, null);
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);
});
}
);
console.log("xxxxxxxxxx", this.searchForm); if (field.default) {
// 如果此时已经有默认值了，就立马根据这个默认值来发起请求 // default 必须有个 value 属性！哪怕是 input 输入框
if (this.searchForm[innerIdx]) { this.dataForm[field.prop] = field.default.value;
// TODO: 这个判断好像不太需要... }
console.log("TODO: 这个判断好像不太需要...");
} else { // 更新选项列表
console.log("TODO: 监听的字段还没来得及设置值呢..."); if (!field.watch && field.fn && typeof field.fn === "function") {
} // 设置自身的选项列表
} field.fn().then(({ data: res }) => {
}); if (res.code === 0 && res.data) {
}, // TODO: 此处需要随具体情况再做更新
methods: { field.select = res.map((_) => {
handleBtnClick(name) { // 找到默认项
this.$emit("btn-click", { btnName: name, payload: null }); 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> </script>
<style scoped> <style scoped>
.base-search-form { .base-search-form {
display: flex; display: flex;
/* align-items: center; */ /* align-items: center; */
/* position: relative; */ /* position: relative; */
} }
.brand-color-line { .brand-color-line {
display: inline-block; display: inline-block;
height: 20px; height: 20px;
width: 6px; width: 6px;
margin-right: 8px; margin-right: 8px;
margin-top: 10px; margin-top: 10px;
border-radius: 2px; border-radius: 2px;
background: #0b58ff; background: #0b58ff;
/* position: absolute; */ /* position: absolute; */
} }
</style> </style>

64
src/components/noTemplateComponents/statusComponent.js
View File

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

2
src/utils/request.js
View File

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

25
src/views/atomViews/ListViewWithHead.vue
View File

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

1
src/views/modules/pms/productionLine/config.js
View File

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

19
src/views/modules/pms/productionLine/index.vue
View File

@ -7,28 +7,13 @@ import initConfig from './config';
import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue'; import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
export default { export default {
name: 'BlenderView', name: 'ProductionLineView',
components: { ListViewWithHead }, components: { ListViewWithHead },
provide() { provide() {
return { return {
urls: this.allUrls 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() { data() {
const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this); const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
return { return {