BST_bigScreen/src/views/PurchasingManage/OutstockOrder/edit.vue

<template>
  <div>
    <Toptitle :title="$route.query.type == 1 ? '新增出库单' : '编辑出库单'">
      <slot name="titleButton">
        <Button
          @click="handleReference(8, 1)"
          type="primary"
          ghost
          style="margin-right: 10px"
          >参照入库单</Button
        >
        <Button
          @click="handleReference(9, 4)"
          disabled
          type="primary"
          ghost
          style="margin-right: 10px"
          >参照派工单</Button
        >
        <!-- <Button @click="handleReference(4)"
                type="primary"
                ghost
                style="margin-right:10px;">参照质检单</Button> -->
        <Button @click="goBack" type="primary" ghost style="margin-right: 10px"
          >返回</Button
        >
        <Button
          @click="postData"
          type="primary"
          ghost
          style="margin-right: 10px"
          >确定</Button
        >
      </slot>
    </Toptitle>
    <div class="content_topform">
      <Form :label-width="90" :model="searchData">
        <FormItem label="项目名称:">
          <Input
            type="text"
            size="small"
            v-model="searchData.client_name"
            style="width: 200px; margin-top: 6px"
            placeholder="项目名称"
          >
            <span
              slot="append"
              style="cursor: pointer"
              @click="showProjectModal = true"
              >选择</span
            >
          </Input>
        </FormItem>
        <FormItem label="供应商名称:">
          <Input
            type="text"
            size="small"
            v-model="searchData.title"
            style="width: 200px; margin-top: 6px"
            placeholder="供应商名称"
          >
            <span
              slot="append"
              style="cursor: pointer"
              @click="showSupplierModal = true"
              >选择</span
            >
          </Input>
        </FormItem>
        <FormItem label="单据号:">
          <Input
            type="text"
            size="small"
            readonly
            v-model="searchData.order_out_no"
            style="width: 200px"
            placeholder="自动生成"
          />
        </FormItem>
        <!-- <FormItem label="制单人:">
          <Input type="text"
                 size="small"
                 v-model="searchData.nickname"
                 style="width: 200px"
                 placeholder="制单人" />
        </FormItem> -->
        <FormItem label="制单日期:">
          <DatePicker
            type="date"
            size="small"
            style="width: 200px"
            placeholder="年/月/日"
            :value="func.replaceDate(searchData.crt_time)"
          ></DatePicker>
        </FormItem>
        <FormItem label="备注:">
          <Input
            type="textarea"
            size="small"
            v-model="searchData.remark"
            style="width: 200px"
            placeholder="备注"
          />
        </FormItem>
      </Form>
    </div>
    <div class="content_table">
      <div class="content_table_btn">
        <div>
          <span>请购清单</span>
          <Button
            @click="showModal = true"
            type="primary"
            size="small"
            style="margin-left: 10px"
            >选择物料</Button
          >
        </div>
        <div class="content_table_btn_right"></div>
      </div>
      <Table :columns="tableColumns" border :data="tableData">
        <template slot="setSlot" slot-scope="{ row, index }">
          <a
            style="margin: 0 5px"
            :disabled="row.state == 0"
            @click="handleSet(4, row, index)"
            >删除</a
          >
        </template>
      </Table>
    </div>
    <Modal
      v-model="showModal"
      title="选择物料"
      width="80"
      @on-ok="handleSelect"
      @on-cancel="showModal = false"
    >
      <div class="modal_content">
        <div class="modal_content_left">
          <Tree
            :data="modalData.treeData"
            children-key="list"
            style="width: 100%"
            @on-select-change="handleTreeSlect"
            class="demo-tree-render"
          ></Tree>
        </div>
        <div class="modal_content_center">
          <div class="modal_content_center_top">
            <div>
              <span>物料名称:</span>
              <Input
                type="text"
                v-model="modalData.title"
                placeholder="请输入物料名称"
              />
            </div>
            <Button @click="initModal()" type="primary" style="margin: 0 10px"
              >搜索</Button
            >
          </div>
          <div class="modal_content_center_body">
            <Table
              :columns="modalTableColumns"
              height="520"
              border
              @on-select="handleSelection"
              :loading="modalTableLoading"
              :data="modalData.tableData"
            >
            </Table>
            <div class="modal_content_center_footer">
              <Page
                :page-size-opts="[10, 20, 30, 40, 100]"
                @on-page-size-change="changeModalSize"
                @on-change="changeModalPage"
                :current="modal_page_index"
                show-total
                :total="modal_total"
                show-sizer
                :page-size="modal_page_size"
              />
            </div>
          </div>
        </div>
        <div class="modal_content_right">
          <span>已选</span>
          <Table
            :columns="selectedColumns"
            max-height="500"
            border
            :data="modalData.selectedData"
          >
            <template slot="selectedSetSlot" slot-scope="{ row, index }">
              <a
                style="margin: 0 5px; color: red"
                @click="handleSelectedDele(row, index)"
                >删除</a
              >
            </template>
          </Table>
        </div>
      </div>
    </Modal>
    <Modal
      v-model="showProjectModal"
      title="选择项目"
      width="80"
      @on-ok="handleProjectSelect"
      @on-cancel="showProjectModal = false"
    >
      <div class="modal_content">
        <div class="modal_content_center">
          <div class="modal_content_center_top">
            <span>项目名称:</span>
            <Input
              type="text"
              v-model="modalProjectData.title"
              style="width: 180px"
              placeholder="请输入物料名称"
            />
            <Button
              @click="initProjectModal()"
              type="primary"
              style="margin: 0 10px"
              >搜索</Button
            >
          </div>
          <div class="modal_content_center_body">
            <Table
              :columns="modalProjectTableColumns"
              height="520"
              border
              :loading="modalProjectTableLoading"
              :data="modalProjectData.tableData"
            >
              <template slot="basicTypeSet" slot-scope="{ row }">
                <div>
                  <span
                    v-for="item in warningList"
                    :key="item.id"
                    :style="{ color: item.color }"
                    v-show="item.id == row.warning_state"
                    >{{ item.title }}</span
                  >
                </div>
              </template>
            </Table>
            <div class="modal_content_center_footer">
              <Page
                :page-size-opts="[10, 20, 30, 40, 100]"
                @on-page-size-change="changeProjectModalSize"
                @on-change="changeProjectModalPage"
                :current="modal_project_page_index"
                show-total
                :total="modal_project_total"
                show-sizer
                :page-size="modal_project_page_size"
              />
            </div>
          </div>
        </div>
      </div>
    </Modal>
    <Modal
      v-model="showSupplierModal"
      title="选择供应商"
      width="80"
      @on-ok="handleSupplierSelect"
      @on-cancel="showSupplierModal = false"
    >
      <div class="modal_content">
        <div class="modal_content_left">
          <Tree
            :data="modalSupplierData.treeData"
            children-key="sub"
            style="width: 100%"
            @on-select-change="handleSupplierTreeSlect"
            class="demo-tree-render"
          ></Tree>
        </div>
        <div class="modal_content_center">
          <div class="modal_content_center_top">
            <span>供应商名称:</span>
            <Input
              type="text"
              v-model="modalSupplierData.title"
              style="width: 180px"
              placeholder="请输入供应商名称"
            />
            <Button
              @click="initSupplierModal(modalSupplierData)"
              type="primary"
              style="margin: 0 10px"
              >搜索</Button
            >
          </div>
          <div class="modal_content_center_body">
            <Table
              :columns="modalSupplierTableColumns"
              height="520"
              border
              :loading="modalSupplierTableLoading"
              :data="modalSupplierData.tableData"
            >
            </Table>
            <div class="modal_content_center_footer">
              <Page
                :page-size-opts="[10, 20, 30, 40, 100]"
                @on-page-size-change="changeSupplierModalSize"
                @on-change="changeSupplierModalPage"
                :current="modal_supplier_page_index"
                show-total
                :total="modal_supplier_total"
                show-sizer
                :page-size="modal_supplier_page_size"
              />
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      fax_modify: "",
      searchData: {
        client_name: "",
      },
      modalProjectData: {
        title: "",
        tableData: [{}],
      },
      modalSupplierData: {
        title: "",
        code: "",
        treeData: [
          {
            title: "供应商分类",
            expand: true,
            sub: [],
            render: (h, { root, node, data }) => {
              return h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    width: "100%",
                  },
                },
                [
                  h("span", [
                    h("Icon", {
                      props: {
                        type: "ios-folder-outline",
                      },
                      style: {
                        marginRight: "8px",
                      },
                    }),
                    h("span", data.title),
                  ]),
                  h("span", {
                    style: {
                      display: "inline-block",
                      // float: 'right',
                      marginRight: "32px",
                    },
                  }),
                ]
              );
            },
          },
        ],
        tableData: [{}],
      },
      tableColumns: [
        {
          title: "物料分类",
          key: "type_title",
          align: "center",
          minWidth: 140,
        },
        { title: "物料名称", key: "title", align: "center", minWidth: 140 },
        {
          title: "物料规格",
          key: "",
          align: "center",
          minWidth: 140,
          render: (h, params) => {
            const { row } = params;
            let text = `${row.long ? row.long : 0}*${
              row.width ? row.width : 0
            }*${row.high ? row.high : 0}`;
            return h("span", {}, text);
          },
        },
        { title: "计量单位", key: "unit", align: "center", minWidth: 100 },
        {
          title: "出库数量",
          key: "num",
          align: "center",
          minWidth: 120,
          render: (h, params) => {
            const { row, index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.num,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.num = e.target.value;
                  // currentRow.total_price = (1 * currentRow.price * currentRow.num).toFixed(2)
                  // currentRow.no_tax_amount = (1 * currentRow.no_tax_price * currentRow.num).toFixed(2)
                  // currentRow.tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
                  this.tableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "出库价格",
          key: "total_price",
          align: "center",
          minWidth: 120,
          render: (h, params) => {
            const { row, index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.tableData[index])
            );
            return this.$route.query.type == 2
              ? h("span", {}, currentRow.total_price)
              : h("Input", {
                  props: {
                    value: currentRow.total_price,
                    type: "text",
                  },
                  on: {
                    "on-change": (e) => {
                      currentRow.total_price = e.target.value;
                      this.tableData.splice(index, 1, currentRow);
                    },
                  },
                });
          },
        },
        {
          title: "操作",
          key: "code",
          align: "center",
          minWidth: 100,
          slot: "setSlot",
        },
      ],
      tableData: [],
      showModal: false,
      showProjectModal: false,
      showSupplierModal: false,
      modalTableLoading: false,
      modalProjectTableLoading: false,
      modalSupplierTableLoading: false,
      modal_project_page_index: 1,
      modal_project_page_size: 10,
      modal_project_total: 0,
      modal_supplier_page_index: 1,
      modal_supplier_page_size: 10,
      modal_supplier_total: 0,
      currentChoose: {},
      modalProjectTableColumns: [
        {
          title: "选择",
          key: "",
          align: "center",
          minWidth: 60,
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.currentChoose.id == id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag,
                },
                on: {
                  "on-change": () => {
                    self.currentChoose = params.row;
                  },
                },
              }),
            ]);
          },
        },
        {
          title: "项目名称",
          key: "client_name",
          align: "center",
          minWidth: 100,
        },
        {
          title: "紧急程度",
          align: "center",
          key: "warning_state",
          minWidth: 80,
          slot: "basicTypeSet",
        },
        {
          title: "创建时间",
          key: "crt_time",
          align: "center",
          minWidth: 110,
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDate(row.crt_time));
          },
        },
      ],
      modalSupplierTableColumns: [
        {
          title: "选择",
          key: "",
          align: "center",
          minWidth: 60,
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.currentChoose.id == id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag,
                },
                on: {
                  "on-change": () => {
                    self.currentChoose = params.row;
                  },
                },
              }),
            ]);
          },
        },
        { title: "供应商编码", key: "code", align: "center", minWidth: 100 },
        { title: "供应商名称", key: "title", align: "center", minWidth: 80 },
        { title: "负责人", key: "contact", align: "center", minWidth: 110 },
        { title: "联系方式", key: "mobile", align: "center", minWidth: 110 },
      ],
      modalData: {
        title: "",
        tableData: [{}],
        selectedData: [],
        treeData: [
          {
            title: "物料分类",
            expand: true,
            list: [],
            render: (h, { root, node, data }) => {
              return h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    width: "100%",
                  },
                },
                [
                  h("span", [
                    h("Icon", {
                      props: {
                        type: "ios-folder-outline",
                      },
                      style: {
                        marginRight: "8px",
                      },
                    }),
                    h("span", data.title),
                  ]),
                  h("span", {
                    style: {
                      display: "inline-block",
                      // float: 'right',
                      marginRight: "32px",
                    },
                  }),
                ]
              );
            },
          },
        ],
      },
      selectedColumns: [
        { title: "物料名称", key: "title", align: "center", minWidth: 110 },
        {
          title: "操作",
          key: "title",
          align: "center",
          minWidth: 90,
          slot: "selectedSetSlot",
        },
      ],
      modal_page_index: 1,
      modal_page_size: 10,
      modal_total: 0,
      modalTableColumns: [
        { title: "全选", type: "selection", align: "center", minWidth: 60 },
        { title: "物料名称", key: "title", align: "center", minWidth: 110 },
        { title: "物料规格", key: "model", align: "center", minWidth: 110 },
        { title: "计量单位", key: "unit", align: "center", minWidth: 110 },
      ],
      warningList: [],
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取基础物料类型
    this.axios({ method: "get", url: "/api/basics_material_index_level" })
      .then((res) => {
        this.modalData.treeData[0].list = res.data;
      })
      .catch((err) => {});
    // 获取供应商列表
    this.axios({ method: "get", url: "/api/supply_list" })
      .then((res) => {
        this.suppliersList = res.data.data;
      })
      .catch((err) => {});
    // 获取供应商分类
    this.axios({ method: "get", url: "/api/basic_supply_list" })
      .then((res) => {
        this.modalSupplierData.treeData[0].sub = res.data;
      })
      .catch((err) => {});
    // 获取项目列表
    this.axios({ method: "get", url: "/api/order_index" })
      .then((res) => {
        this.modalProjectData.tableData = res.data.data;
        this.modal_project_total = res.data.total;
      })
      .catch((err) => {});
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
    this.initModal();
    this.initProjectModal();
    this.initSupplierModal(this.modalSupplierData);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.$route.query.order_out_no != "") {
      this.initData(this.$route.query.order_out_no);
    }
  },
  methods: {
    initData(order_out_no) {
      this.axios({
        method: "get",
        url: "/api/warehouse_order_out_detail",
        params: { order_out_no },
      })
        .then((res) => {
          this.tableData = res.data.list;
          // this.tableData.forEach(element => {
          //   element.fax = element.fax * 100
          //   element.total_price = (1 * element.price * element.num).toFixed(2)
          //   element.no_tax_price = (1 * element.price / (1 + 1 * element.fax / 100)).toFixed(2)
          //   element.no_tax_amount = (1 * element.no_tax_price * element.num).toFixed(2)
          //   element.tax_amount = (1 * element.total_price - 1 * element.no_tax_amount).toFixed(2)
          // });
          const data = JSON.parse(JSON.stringify(res.data));
          delete data.list;
          this.searchData = data;
        })
        .catch((err) => {});
    },
    postData() {
      this.tableData.forEach((element) => {
        if (element.type != 0) {
          this.searchData.type = 1;
        } else {
          this.searchData.type = 0;
        }
      });
      let obj = JSON.parse(JSON.stringify(this.searchData));
      obj.crt_time = parseInt(new Date(obj.crt_time).getTime() / 1000) || "";
      if (this.$route.query.order_out_no == "") {
        // 新增
        this.axios({
          method: "post",
          url: "/api/warehouse_order_out_add",
          data: {
            ...obj,
            list: this.tableData,
          },
        })
          .then((res) => {
            this.$Message.success(res.msg);
            this.goBack();
          })
          .catch((err) => {});
      } else {
        // 编辑
        this.axios({
          method: "post",
          url: "/api/warehouse_order_out_edit",
          data: {
            order_out_no: this.$route.query.order_out_no,
            ...obj,
            list: this.tableData,
          },
        })
          .then((res) => {
            this.$Message.success(res.msg);
            this.goBack();
          })
          .catch((err) => {});
      }
    },
    handleReference(type, refer_type) {
      let title = type == 8 ? "参照入库单" : "参照派工单";
      this.$reference({
        type,
        title,
        refer_type,
        then: (result, data) => {
          this.tableData = [...this.tableData, ...result];
        },
      });
    },
    handleSet(type, row, index) {
      this.tableData.splice(index, 1);
    },
    handleSelect() {
      this.modalData.selectedData.forEach((element) => {
        element.type_title = element.title;
        element.type == 0;
      });
      this.tableData = [...this.tableData, ...this.modalData.selectedData];
    },
    changeModalSize(e) {
      this.modal_page_size = e;
      this.initModal();
    },
    changeModalPage(e) {
      this.modal_page_index = e;
      this.initModal();
    },
    initModal() {
      this.axios({
        method: "get",
        url: "/api/material_detail_list",
        params: {
          page_index: this.modal_page_index,
          page_size: this.modal_page_size,
          title: this.modalData.title,
        },
      })
        .then((res) => {
          this.modal_total = res.data.total;
          this.modalData.tableData = res.data.data;
          this.reselection();
        })
        .catch((err) => {});
    },
    handleSelection(selection, row) {
      this.modalData.selectedData.push(row);
    },
    handleSelectionCancel(selection, row) {
      this.modalData.selectedData.forEach((element, index) => {
        if (element.material_detail_id == row.material_detail_id) {
          this.modalData.selectedData.splice(index, 1);
        }
      });
    },
    handleSelectionAll(selection) {
      this.modalData.selectedData =
        this.modalData.selectedData.concat(selection);
    },
    handleSelectionAllCancel() {
      this.modalData.tableData.forEach((element) => {
        this.modalData.selectedData = this.modalData.selectedData.filter(
          (x) => {
            return x.material_detail_id != element.material_detail_id;
          }
        );
      });
    },
    reselection() {
      this.modalData.selectedData.forEach((element) => {
        this.modalData.tableData.forEach((ele, idx) => {
          if (element.material_detail_id == ele.material_detail_id) {
            this.$nextTick(() => {
              this.$refs.modelTable.$refs.tbody.objData[idx]._isChecked = true;
              this.$forceUpdate();
            });
          }
        });
      });
    },
    handleTreeSlect(array, row) {
      row.id &&
        this.axios({
          method: "get",
          url: "/api/material_detail_list",
          params: {
            page_index: this.modal_page_index,
            page_size: this.modal_page_size,
            m_id: row.id,
          },
        })
          .then((res) => {
            this.modal_total = res.data.total;
            this.modalData.tableData = res.data.data;
          })
          .catch((err) => {});
    },
    handleSelectedDele(row, index) {
      this.modalData.selectedData.splice(index, 1);
    },
    goBack() {
      this.$router.go(-1);
    },
    handleProjectSelect() {
      this.searchData.client_name = this.currentChoose.client_name;
      this.searchData.order_no = this.currentChoose.order_no;
    },
    handleSupplierSelect() {
      this.searchData.title = this.currentChoose.title;
      this.searchData.supply_id = this.currentChoose.id;
    },
    changeProjectModalSize(e) {
      this.modal_project_page_size = e;
      this.initProjectModal();
    },
    changeProjectModalPage(e) {
      this.modal_project_page_index = e;
      this.initProjectModal();
    },
    initProjectModal() {
      this.axios({
        method: "get",
        url: "/api/order_index",
        params: {
          page_index: this.modal_project_page_index,
          page_size: this.modal_project_page_size,
          title: this.modalProjectData.title,
        },
      })
        .then((res) => {
          this.modal_project_total = res.data.total;
          this.modalProjectData.tableData = res.data.data;
        })
        .catch((err) => {});
    },
    changeSupplierModalSize(e) {
      this.modal_supplier_page_size = e;
      this.initSupplierModal(this.modalSupplierData);
    },
    changeSupplierModalPage(e) {
      this.modal_supplier_page_index = e;
      this.initSupplierModal(this.modalSupplierData);
    },
    initSupplierModal(searchData) {
      this.axios({
        method: "get",
        url: "/api/supply_list",
        params: {
          page_index: this.modal_supplier_page_index,
          page_size: this.modal_supplier_page_size,
          title: searchData.title,
          code: searchData.code,
        },
      })
        .then((res) => {
          this.modal_supplier_total = res.data.total;
          this.modalSupplierData.tableData = res.data.data;
        })
        .catch((err) => {});
    },
    handleSupplierTreeSlect(arr, row) {
      this.modalSupplierData.code = row.code;
      this.initSupplierModal(this.modalSupplierData);
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.content_topform {
  padding-top: 20px;
  /deep/.ivu-form {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  /deep/.ivu-form-item {
    display: inline-block;
    width: 300px;
  }
}
.content_table {
  .content_table_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
  }
  .content_table_btn_right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.modal_content {
  display: flex;
  justify-content: center;
  overflow: hidden;
  overflow-y: auto;
  .modal_content_left {
  }
  .modal_content_center {
    width: 80%;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    padding: 0 20px;
    .modal_content_center_top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        width: 100px;
      }
      div {
        display: flex;
        justify-content: space-around;
        align-items: center;
        span {
          width: 100px;
        }
      }
      .modal_content_center_body {
        overflow: hidden;
        overflow-y: auto;
        height: 500px;
      }
    }
    .modal_content_center_body {
      padding-top: 20px;
    }
    .modal_content_center_footer {
      display: flex;
      justify-content: center;
      padding-top: 20px;
    }
  }
  .modal_content_right {
    width: 30%;
    padding: 0 20px;
  }
}
/deep/ .ivu-table-wrapper {
  overflow: visible;
} //穿透iview
</style>