价格申报单详情、新增页面

src/views/purchase/priceDeclaration/add-price-declaration.vue

@@ -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>

src/views/purchase/priceDeclaration/index.vue

@@ -2,6 +2,9 @@
 <template>
   <el-card v-loading="loading" class="priceDeclaration" :body-style="{ padding: 0 }">
 
+    <addPriceDeclaration ref="addDeclaration"></addPriceDeclaration>
+    <seePriceDeclaration ref="seeDeclaration"></seePriceDeclaration>
+
     <!-- 检索 -->
     <el-form size="mini" label-position="right" label-width="85px" :model="searchParams" style="padding: 20px 0 0 0">
       <el-row :gutter="24">
@@ -31,12 +34,11 @@
         @click="handleSearchChange"></i>
     </el-divider>
 
-
     <!-- 操作 -->
     <el-row :gutter="24" style="padding: 0 20px">
       <!-- <el-col :span="6">  </el-col> -->
       <el-col :span="24" style="text-align: right">
-        <el-button size="mini" type="danger">新增</el-button>
+        <el-button size="mini" type="danger" @click="handleAddDeclaration">新增</el-button>
         <el-button-group>
           <el-dropdown>
             <el-button size="mini">
@@ -66,11 +68,10 @@
       </el-col>
     </el-row>
 
-
     <el-container>
       <el-main>
         <!-- 主信息 -->
-        <el-table class="pd_mainTable" :data="tableData" size="mini" @row-dblclick="handleOpenDetails">
+        <el-table class="pd-mainTable" :data="tableData" size="mini" @row-dblclick="handleOpenDetails">
           <el-table-column type="selection" width="35" />
           <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.key" :label="column.title"
             :width="column.width || 180" :show-overflow-tooltip="column.showOverflowTooltip || true">
@@ -90,17 +91,21 @@
         </el-pagination>
 
         <!-- 附表格 -->
-        <el-tabs class="pd_tabs" v-model="activeName" @tab-click="handleTabClick">
-          <el-tab-pane v-for="v in viceTable" :label="v.title" :name="v.name">
+        <div class="pd-viceTable">
+          <el-tabs class="pd-tabs" v-model="activeName" @tab-click="handleTabClick" style="width: 100%;">
+            <el-tab-pane v-for="v in viceTable" :label="v.title" :name="v.name">
+
+              <el-table class="pd_viceTable" :data="tabTableDatas[v.name]" style="width: 100%;">
+                <el-table-column v-if="tabTableDatas[v.name].lenth" type="index" width="35" />
+                <el-table-column v-for="(column, index) in v.columns" :key="index" :prop="column.key"
+                  :label="column.title" :width="column.width || 180"
+                  :show-overflow-tooltip="column.showOverflowTooltip || true">
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
 
-            <el-table class="pd_viceTable" :data="viceData" size="mini">
-              <el-table-column type="index" width="35" />
-              <el-table-column v-for="(column, index) in v.columns" :key="index" :prop="column.key" :label="column.title"
-                :width="column.width || 180" :show-overflow-tooltip="column.showOverflowTooltip || true">
-              </el-table-column>
-            </el-table>
-          </el-tab-pane>
-        </el-tabs>
       </el-main>
     </el-container>
 
@@ -109,8 +114,15 @@
 
 <script>
 import declaration from '@/api/business/purchase/priceDeclaration'
+import addPriceDeclaration from './add-price-declaration.vue'
+import seePriceDeclaration from './see-price-declaration.vue'
 
 export default {
+  name: 'priceDeclaration',
+  components: {
+    addPriceDeclaration,
+    seePriceDeclaration
+  },
   data() {
     const arr2Obj = function (data, keyName, valueName) {
       return Object.fromEntries(
@@ -213,7 +225,13 @@ export default {
       tableColumns: initTableHeader(),
       // 附表格
       viceTable: initViceTable(),
-      viceData: [],
+      // 附表格数据
+      tabTableDatas: {
+        // 物料信息表
+        materialBasic: [],
+        // 执行范围组织
+        enforcementScope: [],
+      },
       // 列表数据
       tableData: [
         {
@@ -270,6 +288,14 @@ export default {
       //   title: this.isSimpleSearch ? "Simple Search" : "All Search",
       // });
     },
+    // 新增
+    handleAddDeclaration() {
+      const { setVisible } = this.$refs.addDeclaration;
+      setVisible(true);
+      setTimeout(() => {
+        this.$notify.info("Open Add Drawer");
+      }, 250);
+    },
     // 标签页切换
     handleTabClick() {
       console.log(this.activeName, '标签页切换');
@@ -278,6 +304,11 @@ export default {
     // 行双击-进入详情
     handleOpenDetails(row) {
       console.log(row, '行双击-进入详情');
+      const { setVisible } = this.$refs.seeDeclaration;
+      setVisible(true);
+      setTimeout(() => {
+        this.$notify.info("Open See Drawer");
+      }, 250);
     },
     // 行编辑
     handleEdit(index, row) {
@@ -316,20 +347,20 @@ export default {
   .el-main {
     padding-top: 0px;
 
-
-
-    .pd_mainTable {
+    .pd-mainTable {
       width: 100%;
       margin: 20px 0 0 0;
-
-
     }
 
-    .pd_tabs {
-      margin-top: 20px;
-
-      .pd_viceTable {}
+    .pd-viceTable {
+      padding: 20px 0 0 0;
+      display: flex;
+      flex-wrap: wrap;
     }
+
+    // .pd_tabs {
+    //   margin-top: 20px;
+    // }
   }
 }
 </style>

src/views/purchase/priceDeclaration/see-price-declaration.vue

@@ -1,11 +1,208 @@
 <!-- 价格申报单-详情 -->
 <template>
+  <el-drawer title="我是标题" direction="btt" size="100%" :with-header="false" :visible.sync="visible"
+    :before-close="handleClose">
+    <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"
+                :clearable="column.clearable" style="width: 90%"></el-input>
+
+              <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 === '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-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>
 
 <script>
 export default {
-  name:'seePriceDeclaration',
-
+  name: 'seePriceDeclaration',
+  data() {
+    const arr2Obj = function (data, keyName, valueName) {
+      return Object.fromEntries(
+        data.map((item) => [item[keyName], item[valueName]])
+      );
+    };
+    const columns = [
+      { key: "id", title: "id", type: "TagSelect", require: true },
+      { key: "status", title: "单据状态" },
+      { key: "priceName", title: "价格名称" },
+      { key: "supplier", title: "供应商" },
+      { key: "supplierName", title: "供应商名称" },
+      { key: "puOrg", title: "采购组织" },
+      { key: "puOrgName", title: "采购组织名称" },
+      { key: "currency", title: "币种" },
+      { key: "currencyName", title: "币种名称" },
+      { key: "explain", title: "价格合理性说明" },
+      { key: "buyer", title: "采购员" },
+      { key: "buyerName", title: "采购员名称" },
+      { key: "puDept", title: "采购部门" },
+      { key: "puDeptName", title: "采购部门名称" },
+      { key: "sourceType", title: "来源单据类型" },
+      { key: "source", title: "来源单据号" },
+      { key: "isEffective", title: "是否已推价格" },
+      { key: "effectiveDate", title: "生效日期" },
+      { key: "file", title: "附件" },
+      { key: "tenantId", title: "租户号" },
+      { key: "revision", title: "乐观锁" },
+      { key: "createByName", title: "创建人名称" },
+      { key: "updateByName", title: "更新人" },
+      { key: "delFlag", title: "删除标记" }
+    ];
+    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: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      // 标签页表格列
+      tabColumns: initTabColumns(),
+      // 标签页激活
+      tabName: "materialBasic",
+      // 标签页对应数据
+      tabTableDatas: {
+        materialBasic: [],
+        enforcementScope: [],
+      },
+    }
+  },
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    handleClose() { },
+    handleClick() { },
+  },
+  created() { },
 }
 </script>