|
@@ -1,10 +1,37 @@
|
|
|
<script>
|
|
|
import { LIST } from "@/api/business/purchase/task";
|
|
|
import { TableColumns, SearchColumns } from "./column";
|
|
|
-import { initPage, initDicts, initParams } from "@/utils/init";
|
|
|
+
|
|
|
+const initParams = (prop, key = "key", value = "value") => {
|
|
|
+ // get params
|
|
|
+ const object1 = Object.fromEntries(
|
|
|
+ prop.map(({ item, attr }) => [item[key], attr[value]])
|
|
|
+ );
|
|
|
+ // get mapping params
|
|
|
+ const object2 = {};
|
|
|
+ prop
|
|
|
+ .filter((item) => item.attr.dataMapping)
|
|
|
+ .map(({ attr: { dataMapping } }) => {
|
|
|
+ for (let key in dataMapping) {
|
|
|
+ object2[key] = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return { ...object1, ...object2 };
|
|
|
+};
|
|
|
+
|
|
|
+// 初始化字典
|
|
|
+export const initDicts = (prop) =>
|
|
|
+ Array.from(
|
|
|
+ new Set(
|
|
|
+ prop
|
|
|
+ .filter((item) => (item.attr ? item.attr.dictName : item.dictName))
|
|
|
+ .map((item) => (item.attr ? item.attr.dictName : item.dictName))
|
|
|
+ )
|
|
|
+ );
|
|
|
+
|
|
|
export default {
|
|
|
name: "PuchaseTask",
|
|
|
- dicts: [...initDicts(TableColumns), ...initDicts(SearchColumns)],
|
|
|
+ dicts: [...initDicts([...TableColumns, ...SearchColumns])],
|
|
|
components: {
|
|
|
SeeModel: () => import("./see/index.vue"),
|
|
|
CloseModel: () => import("./close/index.vue"),
|
|
@@ -12,6 +39,9 @@ export default {
|
|
|
ShiftModel: () => import("./modify-buyer/index.vue"),
|
|
|
DirectModel: () => import("./first-direct/index.vue"),
|
|
|
ReturnModel: () => import("./documents-return/index.vue"),
|
|
|
+ ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
|
|
|
+ ElPopoverMultipleSelectV2: () =>
|
|
|
+ import("@/components/popover-select-v2/multiple.vue"),
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -26,7 +56,13 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
- watch: {},
|
|
|
+ watch: {
|
|
|
+ "params.materialCodes": {
|
|
|
+ handler: function (newProp, oldProp) {
|
|
|
+ console.log(newProp, oldProp);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
created() {
|
|
|
this.params.status = "0";
|
|
|
this.useQuery(this.params, this.page);
|
|
@@ -79,7 +115,8 @@ export default {
|
|
|
},
|
|
|
// 重 置
|
|
|
useReset() {
|
|
|
- this.page = initPage();
|
|
|
+ this.page.pageNum = 1;
|
|
|
+ this.page.pageSize = 10;
|
|
|
this.params = initParams(SearchColumns);
|
|
|
this.useQuery(this.params, this.page);
|
|
|
},
|
|
@@ -140,16 +177,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <el-card
|
|
|
- v-loading="loading"
|
|
|
- style="
|
|
|
- width: calc(100% - 20px);
|
|
|
- height: 100%;
|
|
|
- margin: 10px;
|
|
|
- padding: 0 20px 20px 0;
|
|
|
- "
|
|
|
- :body-style="{ padding: 0 }"
|
|
|
- >
|
|
|
+ <el-card v-loading="loading" :body-style="{ padding: 0 }">
|
|
|
<see-model ref="SeeModel"></see-model>
|
|
|
<export-model ref="ExportModel"></export-model>
|
|
|
<close-model
|
|
@@ -168,94 +196,52 @@ export default {
|
|
|
ref="ReturnModel"
|
|
|
@success="useQuery(params, page)"
|
|
|
></return-model>
|
|
|
- <el-backtop target=".el-scrollbar__wrap"></el-backtop>
|
|
|
<el-form
|
|
|
:size="size"
|
|
|
:model="params"
|
|
|
label-width="auto"
|
|
|
label-position="right"
|
|
|
- style="padding: 20px 20px 0"
|
|
|
@submit.native.prevent
|
|
|
>
|
|
|
- <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
|
|
|
+ <el-row :gutter="20">
|
|
|
<el-col
|
|
|
v-for="column in searchColumns"
|
|
|
- :key="column.title"
|
|
|
- :span="column.span || 6"
|
|
|
+ :key="column.item.title"
|
|
|
+ :span="column.item.span || 6"
|
|
|
>
|
|
|
- <el-form-item :prop="column.key" :label="column.title">
|
|
|
- <el-input
|
|
|
- v-if="column.inputType === 'Input'"
|
|
|
- v-model="params[column.key]"
|
|
|
- :disabled="column.disabled"
|
|
|
- :clearable="column.clearable"
|
|
|
- :placeholder="column.placeholder"
|
|
|
- style="width: 100%"
|
|
|
- @keyup.enter.native="useQuery(params, page)"
|
|
|
- ></el-input>
|
|
|
- <el-select
|
|
|
- v-if="column.inputType === 'Select'"
|
|
|
- v-model="params[column.key]"
|
|
|
- :disabled="column.disabled"
|
|
|
- :clearable="column.clearable"
|
|
|
- :placeholder="column.placeholder"
|
|
|
- style="width: 100%"
|
|
|
+ <el-form-item :prop="column.item.key" :label="column.item.title">
|
|
|
+ <component
|
|
|
+ v-if="column.attr.referName"
|
|
|
+ v-bind="column.attr"
|
|
|
+ v-model="params[column.item.key]"
|
|
|
+ :source.sync="params"
|
|
|
+ :is="column.attr.component"
|
|
|
@change="useQuery(params, page)"
|
|
|
- @keyup.enter.native="useQuery(params, page)"
|
|
|
+ ></component>
|
|
|
+ <component
|
|
|
+ v-else-if="column.attr.dictName"
|
|
|
+ v-bind="column.attr"
|
|
|
+ v-model="params[column.item.key]"
|
|
|
+ :is="column.attr.component"
|
|
|
+ @change="useQuery(params, page)"
|
|
|
+ style="width: 100%"
|
|
|
>
|
|
|
<el-option
|
|
|
- v-for="item in dict.type[column.referName]"
|
|
|
+ v-for="item in dict.type[column.attr.dictName]"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-date-picker
|
|
|
- v-if="column.inputType === 'DatePicker'"
|
|
|
- v-model="params[column.key]"
|
|
|
- :type="column.type"
|
|
|
- :placeholder="column.placeholder"
|
|
|
- :value-format="column.valueFormat"
|
|
|
- :unlink-panels="column.unlinkPanels"
|
|
|
- :picker-options="column.pickerOptions"
|
|
|
- :range-separator="column.rangeSeparator"
|
|
|
- :end-placeholder="column.endPlaceholder"
|
|
|
- :start-placeholder="column.startPlaceholder"
|
|
|
- style="width: 100%"
|
|
|
- @change="useQuery(params, page)"
|
|
|
- @keyup.enter.native="useQuery(params, page)"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- <dr-popover-select
|
|
|
- v-if="column.inputType === 'PopoverSelect'"
|
|
|
- v-model="params[column.key]"
|
|
|
- :size="size"
|
|
|
- :source.sync="params"
|
|
|
- :title="column.title"
|
|
|
- :type="column.referName"
|
|
|
- :multiple="column.multiple"
|
|
|
- :readonly="column.readonly"
|
|
|
- :value-key="column.valueKey"
|
|
|
- :placeholder="column.placeholder"
|
|
|
+ </el-option
|
|
|
+ ></component>
|
|
|
+ <component
|
|
|
+ v-else
|
|
|
+ v-bind="column.attr"
|
|
|
+ v-model="params[column.item.key]"
|
|
|
+ :is="column.attr.component"
|
|
|
@change="useQuery(params, page)"
|
|
|
@keyup.enter.native="useQuery(params, page)"
|
|
|
- >
|
|
|
- </dr-popover-select>
|
|
|
- <dr-popover-tree-select
|
|
|
- v-if="column.inputType === 'PopoverTreeSelect'"
|
|
|
- v-model="params[column.key]"
|
|
|
- :source.sync="params"
|
|
|
- :title="column.title"
|
|
|
- :type="column.referName"
|
|
|
- :multiple="column.multiple"
|
|
|
- :value-key="column.valueKey"
|
|
|
- :placeholder="column.placeholder"
|
|
|
- :query-params="column.queryParams"
|
|
|
- @change="useQuery(params, page)"
|
|
|
- @keyup.enter.native="useQuery(params, page)"
|
|
|
- >
|
|
|
- </dr-popover-tree-select>
|
|
|
+ ></component>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -319,17 +305,17 @@ export default {
|
|
|
:key="index"
|
|
|
:prop="column.key"
|
|
|
:label="column.title"
|
|
|
- :width="column.width || 180"
|
|
|
+ :width="column.width || 200"
|
|
|
:show-overflow-tooltip="column.showOverflowTooltip || true"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
<dict-tag
|
|
|
- v-if="column.referName"
|
|
|
+ v-if="column.dictName"
|
|
|
:size="size"
|
|
|
:value="scope.row[column.key]"
|
|
|
- :options="dict.type[column.referName]"
|
|
|
+ :options="dict.type[column.dictName]"
|
|
|
/>
|
|
|
- <span v-else>{{ scope.row[column.key] }}</span>
|
|
|
+ <component is="span" v-else>{{ scope.row[column.key] }}</component>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -341,3 +327,22 @@ export default {
|
|
|
/>
|
|
|
</el-card>
|
|
|
</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-card {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: 100%;
|
|
|
+ margin: 10px;
|
|
|
+ padding: 0 20px 20px 0;
|
|
|
+}
|
|
|
+::v-deep .el-form {
|
|
|
+ padding: 20px 20px 0;
|
|
|
+}
|
|
|
+::v-deep .el-row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+::v-deep .el-table--mini .el-table__cell {
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+</style>
|