Browse Source

物料申请单中将内包装单位文本改为参照弹窗类型

002390 2 years ago
parent
commit
8c28b0d58e
2 changed files with 673 additions and 651 deletions
  1. 237 0
      src/components/PopDialog/innerPackingUnit.vue
  2. 436 651
      src/views/material/requisition/add.vue

+ 237 - 0
src/components/PopDialog/innerPackingUnit.vue

@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <el-dialog
+      title="中包装单位选择"
+      width="1000px"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      v-dialogDrag
+      class="userDialog"
+      :visible.sync="visible"
+    >
+      <el-container style="height: 500px">
+        <el-container>
+          <el-header style="text-align: left; font-size: 12px; height: 30px">
+            <el-form
+              size="small"
+              :inline="true"
+              ref="searchForm"
+              :model="searchForm"
+              @keyup.enter.native="refreshList()"
+              @submit.native.prevent
+            >
+            <el-form-item prop="param" label="名称/编号" >
+                <el-input
+                  size="small"
+                  v-model="searchForm.param"
+                  placeholder="输入名称/编号查询"
+                  clearable
+                ></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  @click="refreshList()"
+                  size="small"
+                  icon="el-icon-search"
+                  >查询</el-button
+                >
+                <el-button
+                  @click="resetSearch()"
+                  size="small"
+                  icon="el-icon-refresh-right"
+                >重置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-header>
+          <el-main>
+            <el-table
+              :data="dataList"
+              v-loading="loading"
+              size="small"
+              border
+              ref="contractTable"
+              @select="handleSelectionChange"
+              @row-click="rowSelect"
+              height="calc(100% - 40px)"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="selection"
+                header-align="center"
+                align="center"
+                width="50"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="code"
+                header-align="center"
+                align="center"
+                sortable="custom"
+                min-width="90"
+                label="code"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                header-align="center"
+                align="center"
+                sortable="custom"
+                min-width="90"
+                label="名称"
+              >
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              @size-change="sizeChangeHandle"
+              @current-change="currentChangeHandle"
+              :current-page="searchForm.pageNo"
+              :page-sizes="[5, 10, 15, 20]"
+              :page-size="searchForm.pageSize"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+            >
+            </el-pagination>
+          </el-main>
+        </el-container>
+      </el-container>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          size="small"
+          @click="visible = false"
+          icon="el-icon-circle-close"
+          >关闭</el-button
+        >
+        <el-button
+          size="small"
+          type="primary"
+          icon="el-icon-circle-check"
+          @click="doSubmit()"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getUnit } from '@/api/requisition/basic'
+export default {
+  data() {
+    return {
+      searchForm: {
+        param: '',
+        pageNo: 1,
+        pageSize: 10,
+      },
+      dataListAllSelections: [], // 所有选中的数据包含跨页数据
+      idKey: "id", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
+      dataList: [],
+      total: 0,
+      orders: [],
+      loading: false,
+      visible: false,
+    };
+  },
+  props: {
+    selectData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 是否启用单选
+    single: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.dataListAllSelections = JSON.parse(JSON.stringify(this.selectData));
+        this.resetSearch();
+      });
+    },
+    // 获取数据列表
+    refreshList() {
+      this.loading = true;
+      getUnit(this.searchForm).then(({ data }) => {
+        console.log('data',data)
+        this.dataList = data.tableBody;
+        this.total = data.total;
+        this.loading = false;
+        this.$nextTick(() => {
+          this.setSelectRow();
+        });
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.searchForm.pageSize = val;
+      this.refreshList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.searchForm.pageNo = val;
+      this.refreshList();
+    },
+    // 排序
+    resetSearch() {
+      this.$refs['searchForm'].resetFields();
+      this.searchForm.pageNo = 1;
+      this.refreshList();
+    },
+    // 表格选中数据
+    rowSelect(row, column, event) {
+      this.$refs.contractTable.clearSelection();
+      this.$refs.contractTable.toggleRowSelection(row);
+      this.dataListAllSelections = this.single ? [row] : selection
+    },
+    // 选中数据
+    handleSelectionChange(selection, row) {
+      console.log('selection11', selection)
+      if (this.single && selection.length > 1) {
+        this.$refs.contractTable.clearSelection();
+        this.$refs.contractTable.toggleRowSelection(row);
+      }
+      this.dataListAllSelections = this.single ? [row] : selection
+    },
+    // 设置选中的方法
+    setSelectRow() {
+      this.$refs.contractTable.clearSelection();
+      if (!this.dataListAllSelections || this.dataListAllSelections.length <= 0) {
+        return;
+      }
+      for (let i = 0; i < this.dataList.length; i++) {
+        if (this.dataListAllSelections.some(item => item[this.idKey] == this.dataList[i][this.idKey])) {
+          // 设置选中,记住table组件需要使用ref="table"
+          this.$refs.contractTable.toggleRowSelection(this.dataList[i], true);
+        }
+      }
+    },
+    doSubmit() {
+      this.visible = false;
+      console.log('选择的数据?',this.dataListAllSelections)
+      this.$emit("doSubmit", this.dataListAllSelections);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.userDialog {
+  .el-dialog__body {
+    padding: 10px 0px 0px 10px;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+  }
+  .el-main {
+    padding: 20px 20px 5px 20px;
+    .el-pagination {
+      margin-top: 5px;
+    }
+  }
+}
+</style>

File diff suppressed because it is too large
+ 436 - 651
src/views/material/requisition/add.vue


Some files were not shown because too many files changed in this diff