BST_bigScreen/src/views/MeasurementOrderMannage/edit.vue

<template>
  <div>
    <Toptitle
      ref="toptitle"
      :title="this.$route.query.editType == 0 ? '编辑订单' : '查看订单详情'"
    >
      <Button
        @click="handleGoDeOrder"
        v-if="$route.query.type == 3"
        type="primary"
        ghost
        style="margin-right: 10px"
        >拆单</Button
      >
      <Button @click="back" type="primary" ghost style="margin-right: 10px"
        >返回</Button
      >
      <Button
        :disabled="$route.query.editType == 1 ? true : false"
        type="primary"
        ghost
        style="margin-right: 10px"
        @click="postData"
        >保存</Button
      >
      <!-- <Button
        :disabled="$route.query.editType == 1 ? true : false"
        type="primary"
        ghost
        style="margin-right: 10px"
        @click="batchConfirm"
        >批量确认</Button
      > -->
      <Button
        :disabled="$route.query.editType != 1 ? true : false"
        type="primary"
        ghost
        @click="openModal"
        >批量下生产</Button
      >
    </Toptitle>

    <Topsearch
      ref="topsearch"
      :list="list"
      @init="init"
      @searchData="init"
    ></Topsearch>
    <div ref="log" class="log-list">
      <div class="log-item" v-for="(item, index) of logList" :key="index">
        <span>{{ item.key }}：</span>
        <span>{{ item.value }}</span>
      </div>
    </div>
    <div>
      <Table
        ref="table"
        @on-selection-change="selectTable"
        :max-height="tableHeight"
        :width="tableWidth"
        class="overflow-table"
        border
        stripe
        :columns="tableColums"
        :data="tableData"
      >
        <div
          slot-scope="{ index }"
          v-for="(item, _key) in tableTop"
          :key="_key"
          :slot="item.slot"
        >
          <Input
            :disabled="$route.query.editType == 1 ? true : false"
            v-model="tableData[index][item.key]"
            :placeholder="'请输入' + item.title"
          />
        </div>
        <template slot-scope="{ row }" slot="up-load">
          <div>
            <img
              @click="getImg(row)"
              style="
                max-width: 50px;
                max-height: 50px;
                position: relative;
                top: 3px;
              "
              :src="$store.state.ip + row.url"
            />
          </div>
        </template>
      </Table>
    </div>

    <Footer
      @change="changePage"
      @changeSize="changeSize"
      :total="total"
      :pageIndex="pageIndex"
    ></Footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "楼幢",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "house",
          placeholder: "请选择",
          value: "",
          option: [],
        },
        {
          title: "单元",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "unit",
          placeholder: "请选择",
          value: "",
          option: [],
        },
        {
          title: "楼层",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "layer",
          placeholder: "请选择",
          value: "",
          option: [],
        },
        {
          title: "房号",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "number_detail",
          placeholder: "请选择",
          value: "",
          option: [],
        },
        {
          title: "产品名称",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "product",
          placeholder: "请选择",
          value: "",
          option: [],
        },
        {
          title: "图号",
          name: "Select",
          multiple: true,
          filterable: true,
          serverName: "url_number",
          placeholder: "请选择",
          value: "",
          option: [],
        },
        // {
        //   title: "测量状态",
        //   name: "Select",
        //   serverName: "measurement_state",
        //   placeholder: "请选择",
        //   value: "",
        //   option: [
        //     { label: "全部", value: 99 },
        //     { label: "测量中", value: 2 },
        //     { label: "测量完成", value: 3 },
        //   ],
        // },
      ],
      type: 1,
      logList: [{ title: "系统单号", value: "10998765" }],
      tableColums: [
        { type: "selection", width: 100, align: "center" },
        {
          title: "房间号",
          align: "center",
          key: "number_detail",
          minWidth: 100,
          render: (h, params) => {
            const { row } = params;
            return h(
              "span",
              `${row.house}-${row.unit}-${row.layer}-${row.number_detail}`
            );
          },
        },
        {
          title: "产品名称",
          align: "center",
          key: "product_title",
          minWidth: 200,
        },
        { title: "产品型号", align: "center", key: "model", minWidth: 150 },
        { title: "单位", align: "center", key: "unit", minWidth: 130 },
        { title: "图号", align: "center", minWidth: 130, key: "url_number" },
        { title: "图纸", align: "center", slot: "up-load", minWidth: 130 },
        { title: "位置", align: "center", minWidth: 200, key: "position" },
        // {
        //   title: "状态",
        //   align: "center",
        //   minWidth: 100,
        //   render: (h, params) =>
        //     h("span", {}, params.row.is_measure == 1 ? "已确认" : "未确认"),
        // },
        // {
        //   title: "测量状态",
        //   align: "center",
        //   key: "measurement_state",
        //   minWidth: 100,
        //   render: (h, params) =>
        //     h(
        //       "span",
        //       {},
        //       params.row.is_measure == 1
        //         ? "测量完成"
        //         : params.row.measurement_state >= 3
        //         ? "测量完成"
        //         : params.row.measurement_state == 1
        //         ? "已下测量"
        //         : params.row.measurement_state == 2
        //         ? "测量中"
        //         : "未下测量"
        //     ),
        // },
        // {
        //   title: "预估产品工期",
        //   align: "center",
        //   minWidth: 200,
        //   key: "predict_working",
        //   render: (h, params) =>
        //     h("span", `${(params.row.predict_working / 8).toFixed(1)}天`),
        // },
        {
          title: "测量数据",
          align: "center",
          width: "200",
          key: "measurement",
        },
      ],
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      total: 100,
      headers: { Authorization: localStorage.getItem("token") },
      currentIndex: 0,
      planInfo: {
        order_product_id: "",
      },
      tableWidth: null,
      tableTop: [],
      select: [],
      bannerImages: [],
      proxyObj: {},
      tableHeight: null,
    };
  },
  created() {
    this.tableWidth = window.innerWidth - 320;
    this.type = this.$route.query.type;
    this.getOptions();
  },
  mounted() {
    this.tableHeight =
      window.innerHeight -
      this.$refs.table.$el.offsetTop -
      this.$refs.toptitle.$el.offsetHeight -
      this.$refs.topsearch.$el.offsetHeight -
      200;
    window.addEventListener("resize", (e) => {
      this.tableWidth = e.target.innerWidth - 300;
      this.$forceUpdate();
    });
  },
  methods: {
    handleGoDeOrder() {
      this.$router.push({
        path: "/cms/BidSystem/ProductDeOrder/detail",
        query: {
          type: this.$route.query.type,
          order_no: this.$route.query.order_no,
          oa_id:this.$route.query.oa_id
        },
      });
    },
    init(row) {
      this.pageIndex = 1;
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize;
      if (this.func.isType(row.house) == "Array") {
        row.house = row.house.join(",");
      }
      if (this.func.isType(row.unit) == "Array") {
        row.unit = row.unit.join(",");
      }
      if (this.func.isType(row.layer) == "Array") {
        row.layer = row.layer.join(",");
      }
      if (this.func.isType(row.number_detail) == "Array") {
        row.number_detail = row.number_detail.join(",");
      }
      if (this.func.isType(row.product) == "Array") {
        row.product = row.product.join(",");
      }
      if (this.func.isType(row.url_number) == "Array") {
        row.url_number = row.url_number.join(",");
      }
      Object.assign(row, this.$route.query);
      Object.assign(this.proxyObj, row);
      this.getData(row);
    },
    getOptions() {
      this.axios("/api/order_detail_word", {
        params: { order_no: this.$route.query.order_no },
      }).then((res) => {
        res.data.house.map((v) => {
          v.value = v.house;
          v.label = v.house;
        });
        res.data.unit.map((v) => {
          v.value = v.unit;
          v.label = v.unit;
        });
        res.data.layer.map((v) => {
          v.value = v.layer;
          v.label = v.layer;
        });
        res.data.number_detail.map((v) => {
          v.value = v.number_detail;
          v.label = v.number_detail;
        });
        res.data.product.map((v) => {
          v.value = v.product;
          v.label = v.product;
        });
        res.data.url_number.map((v) => {
          v.value = v.url_number;
          v.label = v.url_number;
        });
        this.list[0].option = res.data.house;
        this.list[1].option = res.data.unit;
        this.list[2].option = res.data.layer;
        this.list[3].option = res.data.number_detail;
        this.list[4].option = res.data.product;
        this.list[5].option = res.data.url_number;
      });
    },
    back() {
      this.$router.go(-1);
    },
    selectTable(e) {
      this.select = e;
    },
    postData() {
      let result = [];
      this.tableData.map((v, i) => {
        let obj = {};
        obj.order_product_id = v.order_product_id;
        obj.url = v.url || "";
        obj.url_number = v.url_number || "";
        obj.detail = [];
        this.tableTop.map((k) => {
          let o = {};
          let key = k.key;
          for (let m in this.tableData[i]) {
            if (m == key) {
              o.key = key;
              o.value = this.tableData[i][key];
              o.title = k.title;
              obj.detail.push(o);
            }
          }
        });
        result.push(obj);
      });
      let postInfo = JSON.stringify(result);
      this.axios
        .post("/api/orders_save_measure", { data: postInfo })
        .then((res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.getData(this.proxyObj);
          }
        });
    },
    getData(row) {
      this.axios("/api/orders_product_list", { params: row }).then((res) => {
        this.tableData = res.data.list;
        this.logList = res.data.detail;
        this.tableTop = res.data.top;
        this.total = res.data.total;
        // res.data.top.map((v) => {
        //   v.width = 200;
        //   v.slot = v.key;
        //   const n = this.tableColums.filter((x) => x.key == v.key);
        //   if (n.length < 1) {
        //     this.tableColums.splice(5, 0, v);
        //   }
        // });
      });
    },
    successUpload(event) {
      let url = event.data.url;
      this.tableData[this.currentIndex].url = url;
    },
    mapRow(n) {
      this.currentIndex = n;
    },
    changePage(e) {},
    openModal() {
      const result = this.select.map((rows) => rows.order_product_id);
      if (!result || result.length < 1) {
        return this.$Message.error("请至少选择一项");
      }
      this.planInfo.order_product_id = result.join(",");
      this.downProduction({
        title: "下生产",
        type: 2,
        params: this.planInfo,
        then: (e) => {
          this.getData(this.proxyObj);
        },
        cancel: (e) => {},
      });
    },
    batchConfirm() {
      if (this.select.length < 1) {
        return this.$Message.warning("请选择");
      }
      console.log(this.tableTop);
      let result = [];
      this.select.map((rows) => {
        const obj = {};
        this.tableTop.forEach((item) => {
          const { key } = item;
          for (let i in rows) {
            if (key == i) {
              obj[key] = rows[key];
            }
          }
        });
        result.push({ id: rows.id, detail: obj });
      });
      this.axios.post("/api/batch_confirm", { result: result }).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.getData(this.proxyObj);
        }
      });
    },
    getImg(row) {
      if (row.imgs && row.imgs.length > 0) {
        this.$previewImg({
          list: row.imgs,
          baseUrl: this.$store.state.ip,
          baseImgField: "img_url",
          baseTitleField: "",
        });
      } else {
        this.axios("/api/orders_img", {
          params: { id: row.product_id, type: 1 },
        }).then((res) => {
          if (res.code == 200) {
            row.imgs = res.data;
            this.$previewImg({
              list: row.imgs,
              baseUrl: this.$store.state.ip,
              baseImgField: "img_url",
              baseTitleField: "",
            });
          }
        });
      }
    },
    changeSize(e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.pageSize;
      this.getData(this.proxyObj);
    },
  },
};
</script>

<style lang="scss" scoped>
.log-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
}
/deep/ .ivu-table-wrapper {
  overflow: visible;
  color: red;
} //穿透iview
// .page-edit{overflow: hidden;overflow-y: auto;position:relative;top:20px;height:80%;}
</style>