|
|
@@ -2,44 +2,86 @@
|
|
|
<template>
|
|
|
<el-drawer title="我是标题" direction="btt" size="100%" :with-header="false" :visible.sync="visible"
|
|
|
:before-close="handleClose">
|
|
|
- <el-form size="mini" label-position="right" label-width="125px" :model="params">
|
|
|
- <el-card class="add-pd-content" :body-style="{
|
|
|
- padding: '20px',
|
|
|
- display: 'flex',
|
|
|
- 'flex-wrap': 'wrap',
|
|
|
- }">
|
|
|
- <el-form-item v-for="(column, index) in columns" :key="index" :prop="column.key" :label="column.title"
|
|
|
- :required="column.required" style="width: 33%">
|
|
|
+ <el-card :body-style="{
|
|
|
+ padding: '20px',
|
|
|
+ display: 'flex',
|
|
|
+ 'flex-wrap': 'wrap',
|
|
|
+ }" style="margin: 10px">
|
|
|
+ <div slot="header" style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ ">
|
|
|
+ <h3>新增</h3>
|
|
|
+ <div style="text-align: right">
|
|
|
+ <el-button size="mini" @click="setVisible(false)">取消</el-button>
|
|
|
+ <el-button size="mini" type="info" @click="setVisible(false)">保存并新增</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="setVisible(false)">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-form size="mini" label-position="right" label-width="150px" :model="params">
|
|
|
+ <el-col v-for="(column, index) in columns" :key="index" :span="column.span || 8">
|
|
|
+ <el-form-item :prop="column.key" :label="column.title" :required="column.required">
|
|
|
|
|
|
- <el-input v-if="column.type === 'Input'" v-model="params[column.key]" :placeholder="column.placeholder"
|
|
|
- style="width: 90%"></el-input>
|
|
|
+ <el-input v-if="column.type === 'Input'" v-model="params[column.key]" :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable" style="width: 90%"></el-input>
|
|
|
|
|
|
- <el-input-number v-if="column.type === 'InputNumber'" v-model="params[column.key]" controls-position="right"
|
|
|
- :placeholder="column.placeholder" style="width: 90%"></el-input-number>
|
|
|
+ <el-input-number v-if="column.type === 'InputNumber'" v-model="params[column.key]"
|
|
|
+ :controls-position="column.config.controlsPosition" :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable" style="width: 90%"></el-input-number>
|
|
|
|
|
|
- <el-select v-if="column.type === 'TagSelect'" v-model="params[column.key]" multiple clearable collapse-tags
|
|
|
- :placeholder="column.placeholder" style="width: 90%">
|
|
|
- <template #prefix>
|
|
|
- <el-icon class="el-icon-s-operation" style="cursor: pointer" @click.stop="$message.info(234)"></el-icon>
|
|
|
- </template>
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <el-select v-if="column.type === 'Select'" v-model="params[column.key]" :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable" style="width: 90%">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
|
|
|
- <el-date-picker v-if="column.type === 'DatePicker'" v-model="params[column.key]" :type="column.config.type"
|
|
|
- :placeholder="column.placeholder" :picker-options="column.pickerOptions" style="width: 90%">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-card>
|
|
|
- <el-card class="add-pd-option" :body-style="{
|
|
|
- 'text-align': 'right',
|
|
|
- padding: '10px 20px',
|
|
|
- }">
|
|
|
- <el-button size="mini" @click="setVisible(false)">取消</el-button>
|
|
|
- <el-button size="mini" type="info" @click="setVisible(false)">保存并新增</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="setVisible(false)">保存</el-button>
|
|
|
- </el-card>
|
|
|
- </el-form>
|
|
|
+ <el-select v-if="column.type === 'TagSelect'" v-model="params[column.key]" multiple clearable collapse-tags
|
|
|
+ :placeholder="column.placeholder" :clearable="column.clearable" style="width: 90%">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-icon-s-operation" style="cursor: pointer" @click.stop="$message.info(234)"></el-icon>
|
|
|
+ </template>
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-date-picker v-if="column.type === 'DatePicker'" v-model="params[column.key]" :type="column.config.type"
|
|
|
+ :placeholder="column.placeholder" :clearable="column.clearable" :picker-options="column.pickerOptions"
|
|
|
+ style="width: 90%">
|
|
|
+ </el-date-picker>
|
|
|
+
|
|
|
+ <el-upload v-if="column.type === 'Upload'" :file-list="params[column.key]" drag
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/" multiple>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 将文件拖到此处，或<em>点击上传</em>
|
|
|
+ </div>
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ 只能上传jpg/png文件，且不超过500kb
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ <el-card :body-style="{
|
|
|
+ padding: '20px',
|
|
|
+ display: 'flex',
|
|
|
+ 'flex-wrap': 'wrap',
|
|
|
+ }" style="margin: 10px">
|
|
|
+ <el-tabs v-model="tabName" @tab-click="handleClick" style="width: 100%">
|
|
|
+ <el-tab-pane v-for="(column, index) in tabColumns" :key="index" :label="column.title" :name="column.key">
|
|
|
+ <el-table :data="tabTableDatas[column.key]" style="width: 100%">
|
|
|
+ <el-table-column v-for="(cColumn, cIndex) in column.tableColumns" :key="cIndex" :prop="cColumn.key"
|
|
|
+ :label="cColumn.title">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-card>
|
|
|
</el-drawer>
|
|
|
</template>
|
|
|
|
|
|
@@ -52,38 +94,8 @@ export default {
|
|
|
data.map((item) => [item[keyName], item[valueName]])
|
|
|
);
|
|
|
};
|
|
|
- const pickerOptions = {
|
|
|
- disabledDate(time) {
|
|
|
- return time.getTime() > Date.now();
|
|
|
- },
|
|
|
- shortcuts: [
|
|
|
- {
|
|
|
- text: "今天",
|
|
|
- onClick(picker) {
|
|
|
- picker.$emit("pick", new Date());
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "昨天",
|
|
|
- onClick(picker) {
|
|
|
- const date = new Date();
|
|
|
- date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
- picker.$emit("pick", date);
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "一周前",
|
|
|
- onClick(picker) {
|
|
|
- const date = new Date();
|
|
|
- date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
- picker.$emit("pick", date);
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
-
|
|
|
const columns = [
|
|
|
- { key: "id", title: "id", type: "Input", },
|
|
|
+ { key: "id", title: "id", type: "TagSelect", require: true },
|
|
|
{ key: "status", title: "单据状态" },
|
|
|
{ key: "priceName", title: "价格名称" },
|
|
|
{ key: "supplier", title: "供应商" },
|
|
|
@@ -108,12 +120,48 @@ export default {
|
|
|
{ key: "updateByName", title: "更新人" },
|
|
|
{ key: "delFlag", title: "删除标记" }
|
|
|
];
|
|
|
- const initColumns = () => columns;
|
|
|
+ const initColumns = () =>
|
|
|
+ columns.map((column) => {
|
|
|
+ const clearable = column.clearable || true;
|
|
|
+ if (column.type === "InputNumber") {
|
|
|
+ return {
|
|
|
+ ...column,
|
|
|
+ clearable,
|
|
|
+ config: { controlsPosition: "right" },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (column.type === "DatePicker") {
|
|
|
+ return {
|
|
|
+ ...column,
|
|
|
+ clearable,
|
|
|
+ config: { type: "date" },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...column,
|
|
|
+ clearable,
|
|
|
+ };
|
|
|
+ });
|
|
|
const initParams = () => arr2Obj(initColumns(), "key", "value");
|
|
|
-
|
|
|
+ // 标签页列
|
|
|
+ const tabColumns = [
|
|
|
+ {
|
|
|
+ key: 'materialBasic',
|
|
|
+ title: '物料信息表',
|
|
|
+ tableColumns: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'enforcementScope',
|
|
|
+ title: '执行范围组织',
|
|
|
+ tableColumns: [],
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ const initTabColumns = () => tabColumns;
|
|
|
return {
|
|
|
visible: false,
|
|
|
+ // 主数据表头
|
|
|
columns: initColumns(),
|
|
|
+ // 表单
|
|
|
params: initParams(),
|
|
|
options: [
|
|
|
{
|
|
|
@@ -137,6 +185,15 @@ export default {
|
|
|
label: "北京烤鸭",
|
|
|
},
|
|
|
],
|
|
|
+ // 标签页表格列
|
|
|
+ tabColumns: initTabColumns(),
|
|
|
+ // 标签页激活
|
|
|
+ tabName: "materialBasic",
|
|
|
+ // 标签页对应数据
|
|
|
+ tabTableDatas: {
|
|
|
+ materialBasic: [],
|
|
|
+ enforcementScope: [],
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -144,20 +201,11 @@ export default {
|
|
|
this.visible = prop;
|
|
|
},
|
|
|
handleClose() { },
|
|
|
- },
|
|
|
- created() { },
|
|
|
-}
|
|
|
-</script>
|
|
|
+ handleClick() { },
|
|
|
|
|
|
-.add-pd-content {
|
|
|
- margin: 10px
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log(this.params, this.columns);
|
|
|
+ },
|
|
|
}
|
|
|
-
|
|
|
-.add-pd-option {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- margin: 10px;
|
|
|
- width: calc(100% - 20px);
|
|
|
-}}
|
|
|
-</style>
|
|
|
+</script>
|
黄梓星