BST_bigScreen/src/views/BidSystem/ProductDeOrder/detail.vue

<template>
  <div class="BidSystemProductDeOrderEdit">
    <Toptitle title="拆单页">
      <slot name="titleButton">
        <Button
          @click="showSupModal = true"
          type="primary"
          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="top_search_info">
      <Form inline :label-width="100">
        <FormItem label="产品名称:">
          <Input
            type="text"
            size="small"
            clearable
            v-model="searchData.title"
            placeholder="请输入产品名称"
          />
        </FormItem>
        <FormItem label="图号:">
          <Input
            type="text"
            size="small"
            clearable
            v-model="searchData.url_number"
            style="width: 150px"
            placeholder="请输入图号"
          />
        </FormItem>
        <FormItem label="拆单状态:">
          <Select
            v-model="searchData.state"
            size="small"
            clearable
            filterable
            style="width: 150px"
          >
            <Option label="未完成" :value="0"> </Option>
            <Option label="拆单中" :value="1"> </Option>
            <Option label="已完成" :value="2"> </Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button
            size="small"
            type="primary"
            @click="
              initData(
                formData.order_no,
                formData.orders_area_product_detail_id
              )
            "
            >搜索</Button
          >
        </FormItem>
      </Form>
    </div>
    <div class="top_search">
      <div><span>订单号:</span>{{ formData.order_no }}</div>
      <div><span>小区名称:</span>{{ formData.residential_name }}</div>
      <div><span>客户姓名:</span>{{ formData.client_name }}</div>
      <div>
        <span>紧急程度:</span
        ><span
          v-for="_item in warningList"
          :key="_item.id"
          v-show="_item.id == formData.warning_state"
          >{{ _item.title }}</span
        >
      </div>
      <div>
        <span>收款:</span>{{ formData.pay_state == 1 ? "已收款" : "未收款" }}
      </div>
      <div><span>详细地址:</span>{{ formData.address }}</div>
      <div><span>手机号:</span>{{ formData.mobile }}</div>
      <div>
        <span>开始日期:</span>{{ func.replaceDate(formData.start_time) }}
      </div>
      <div><span>交付日期:</span>{{ func.replaceDate(formData.end_time) }}</div>
      <div>
        <span>业务员:</span>
        <span
          v-for="item in salesmanList"
          :key="item.id"
          v-show="formData.salesman == item.id"
          >{{ formData.salesman }}</span
        >
      </div>
      <!-- <div><span>订单类型:</span>{{formData.renovation_type==1?"工装":"家装"}}</div> -->
      <div><span>备注:</span>{{ formData.remark }}</div>
    </div>
    <div class="addArea">
      <div class="addAreaTable">
        <Table :columns="tableColumns" :data="formData.detail" border>
          <template slot="set" slot-scope="{ row, index }">
            <a
              :disabled="row.status != 0"
              style="margin:0 5px"
              @click="handleSet(row, index, 1)"
              >拆单</a
            >
            <a style="margin:0 5px" @click="handleSet(row, index, 2)">详情</a>
          </template>
        </Table>
      </div>
    </div>
    <!-- 项目辅料弹窗 -->
    <Modal title="项目辅料" v-model="showSupModal" :width="400">
      <div>
        <div class="supModalBtn">
          <!-- <Button @click="handleAddSup" type="primary">新增</Button> -->
        </div>
        <Table :columns="supTableColumns" :data="supTableData" border>
          <template slot="combine" slot-scope="{ index }">
            <Select
              v-model="supTableData[index].id"
              @on-change="handlechange"
              size="small"
            >
              <Option
                v-for="item in combineList"
                :value="item.id"
                :key="item.id"
                :label="item.title"
              ></Option>
            </Select>
          </template>
          <template slot="supSet" slot-scope="{ row , index}">
            <!-- <a
              style="margin: 0 5px; color: red"
              v-show="$route.query.type != 3"
              @click="handleSupSet(row, index)"
              >删除</a
            > -->
          </template>
        </Table>
      </div>
      <div class="modal-footer" slot="footer">
        <Button @click="showSupModal = false">取消</Button>
        <Button type="primary" @click="showSupModal = false">确认</Button>
      </div>
    </Modal>
  </div>
</template>

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

export default {
  name: "BidSystemProductDeOrderEdit",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      showSupModal: false,
      showPDTModal: false,
      formData: {
        order_no: "",
        orders_area_product_detail_id: "",
        residential_name: "",
        client_name: "",
        address: "",
        mobile: "",
        pay_state: "",
        warning_state: "",
        salesman: "",
        remark: "",
        //区域列表
        area: [
          {
            num: "",
            title: "",
            unit: "",
            quantity: "",
            house_type: "",
            remark: "",
            order_no: "",
            product: [
              // {
              //   title:'',
              //   num:'',
              //   measure:'',
              //   process_property:'',
              //   url:'',
              //   url_number:'',
              //   remark:''
              // }
            ],
          },
        ],
      },
      product: [{}],
      searchData: {},
      tableColumns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          minWidth: 80,
          resizable: true,
        },
        {
          title: "产品名称",
          key: "title",
          align: "center",
          minWidth: 120,
          resizable: true,
        },
        {
          title: "计量单位",
          key: "unit",
          align: "center",
          minWidth: 100,
          resizable: true,
        },
        {
          title: "图号",
          key: "url_number",
          align: "center",
          minWidth: 80,
          resizable: true,
        },
        {
          title: "数量",
          key: "num",
          align: "center",
          minWidth: 80,
          resizable: true,
        },
        {
          title: "规格",
          key: "measure",
          align: "center",
          minWidth: 140,
          resizable: true,
        },
        {
          title: "工艺属性",
          key: "process_property",
          align: "center",
          minWidth: 140,
          resizable: true,
          tooltip: true,
        },
        {
          title: "图纸",
          key: "url",
          align: "center",
          resizable: true,
          minWidth: 80,
          render: (h, params) => {
            const { row } = params;
            return h(
              "div",
              row.url.map((item, index) => {
                return h("img", {
                  attrs: {
                    src: this.$store.state.ip + item,
                    style:
                      "max-width:50px;max-height:50px;position:relative;top:3px;",
                  },
                  on: {
                    click: (e) => {
                      // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                      // if (res.code == 200) {
                      // row.imgs = res.data
                      let list = [];
                      row.url.forEach((el) => {
                        list.push({ img_url: el });
                      });
                      this.$previewImg({
                        list,
                        baseUrl: this.$store.state.ip,
                        baseImgField: "img_url",
                        baseTitleField: "",
                      });
                      // }
                      // })
                    },
                  },
                });
              })
            );
          },
        },
        {
          title: "左右式",
          key: "left_right_mode",
          align: "center",
          resizable: true,
          minWidth: 80,
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, row.left_right_mode == 1 ? "左式" : "右式");
          },
        },
        {
          title: "拆单状态",
          key: "status",
          align: "center",
          resizable: true,
          minWidth: 80,
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, row.status == 0 ? "未完成" : "已完成");
          },
        },
        {
          title: "操作",
          key: "name",
          align: "center",
          width: "120",
          slot: "set",
          minWidth: 80,
          fixed: "right",
          resizable: true,
        },
      ],
      //产品分类列表
      PDTTypeList: [],
      //业务员列表
      salesmanList: [],
      warningList: [],
      supTableColumns: [
        { title: "序号", type: "index", align: "center", minWidth: 100 },
        {
          title: "辅料名称",
          key: "title",
          align: "center",
          slot: "combine",
          minWidth: 150,
        },
        { title: "操作", align: "center", slot: "supSet", minWidth: 100 },
      ],
      supTableData: [], //项目辅料→辅料名称列表
      combineList: [], //项目辅料列表
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取项目辅料列表
    this.axios("/api/material_combination").then((res) => {
      this.combineList = res.data.data;
    });
    // 2编辑 3详情 4变更 5变更记录
    this.$route.query.type == 3 ? (this.isChecked = true) : "";
    this.$route.query.order_no
      ? (this.formData.order_no = this.$route.query.order_no)
      : "";
    this.$route.query.orders_area_product_detail_id
      ? (this.formData.orders_area_product_detail_id = this.$route.query.orders_area_product_detail_id)
      : "";
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
    // 获取项目辅料
    // this.axios
    //   .get("/api/todo", { params: { order_no: this.formData.order_no } })
    //   .then((res) => {
    //     this.supTableData = res.data
    //   });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.axios("/api/user").then((res) => (this.salesmanList = res.data.data));
    this.axios("/api/parts_product_list").then((res) => {
      this.PDTTypeList = res.data;
    });
    this.initData(
      this.formData.order_no,
      this.formData.orders_area_product_detail_id
    );
  },
  methods: {
    //项目辅料新增
    handleAddSup() {
      this.supTableData.push({ id: "" });
    },
    //项目辅料删除
    handleSupSet(row, index) {
      this.supTableData.splice(index, 1);
    },
    handlechange(val) {
      console.log("val :>> ", val);
    },
    initData(order_no, orders_area_product_detail_id) {
      this.axios({
        method: "get",
        url: "/api/order_area_explode",
        params: {
          order_no,
          ...this.searchData,
        },
      }).then((res) => {
        this.formData = res.data;
        // this.formData.list.forEach((element) => {
        //   element.product.forEach((el, index) => {
        //     el.index = index + 1;
        //   });
        // });
      });
    },
    // 1拆单  2详情
    handleSet(row, index, type) {
      this.$router.push({
        path: "/cms/BidSystem/ProductDeOrder/deorderdetail",
        query: {
          type,
          order_no: this.$route.query.order_no,
          orders_area_product_detail_id: row.id,
        },
      });
    },
    postData() {
      this.axios({
        method: "post",
        url: "/api/order_area_add",
        data: {
          ...this.formData,
        },
      }).then((res) => {
        this.$Message.success(res.msg);
      });
    },
    goback() {
      this.$router.go(-1);
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.BidSystemProductDeOrderEdit {
  overflow: hidden;
  overflow-y: auto;
  .top_search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    div {
      width: 200px;
      padding: 5px;
    }
  }
  .addArea {
    .addAreaTable {
      padding: 20px 0;
    }
    position: relative;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px #999;
    .addAreaBtn {
      position: absolute;
      right: 20px;
      top: 20px;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      width: 220px;
    }
  }
}
.supModalBtn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>