jf-frock/src/views/leadMatch/MatchList/HXYMatchCheck.vue

<template>
  <div>
    <Toptitle title="查看">
         <Button
        @click="handelDel"
        type="primary"
        style="margin-right: 10px"
        >强制删除</Button
      >
      <Button
        @click="handleMatchedSelectAll()"
        type="primary"
        :ghost="!isMatchedSelectAll"
        style="margin-right: 10px"
        >{{ isMatchedSelectAll ? "取消选中" : "全部选中" }}</Button
      >
      <Button
        @click="handleGoProduction(1)"
        type="primary"
        style="margin-right: 10px"
        >下生产</Button
      >
      <Button @click="back" type="primary" ghost style="margin-right: 10px"
        >返回</Button
      >
    </Toptitle>
    <Row style="padding: 10px;font-size: 18px;">
      <Col span="6">
        <span>项目编号：</span><span>{{ project_number }}</span>
      </Col>
      <Col span="6">
        <span>项目名称：</span><span>{{ project_name }}</span>
      </Col>
    </Row>
    <div class="context-tabs">
      <Row type="flex" align="middle" style="padding:10px 0">
        <Col span="5">
          <span>图号：</span>
          <span>
            <Select
              filterable
              multiple
              filter-by-label
              clearable
              transfer
              v-model="matchedInfo.image_number"
              :max-tag-count="2"
              size="small"
              style="width: 150px"
            >
              <Option
                v-for="(item, index) in urlMatchedList"
                :key="index"
                :label="item"
                :value="item"
              ></Option>
            </Select>
          </span>
        </Col>
        <Col span="5">
          <span>产品名称：</span>
          <span>
            <Select
              filterable
              multiple
              filter-by-label
              clearable
              transfer
              v-model="matchedInfo.product_name"
              :max-tag-count="2"
              size="small"
              style="width: 150px"
            >
              <Option
                v-for="(item, index) in productMatchedList"
                :key="index"
                :label="item"
                :value="item"
              ></Option>
            </Select>
          </span>
        </Col>
          <Col span="5">
          <span>区域：</span>
          <span>
            <Select
              filterable
              multiple
              filter-by-label
              clearable
              transfer
              v-model="matchedInfo.t_region"
              :max-tag-count="2"
              size="small"
              style="width: 150px"
            >
              <Option
                v-for="(item, index) in regionList"
                :key="index"
                :label="item"
                :value="item"
              ></Option>
            </Select>
          </span>
        </Col>
        <Col span="2">
          <Button @click="initData" size="small" type="primary">
            搜索
          </Button>
        </Col>
      </Row>
      <div
        v-for="matched_info in matchedList"
        :key="matched_info.number"
        class="matched-block"
      >
        <Row type="flex" justify="space-between" align="top">
          <Col style="display:flex;justify-content: space-around;">
            <div v-if="matched_info.matching_status == 2">
              <Checkbox
                v-show="matched_info.produce_status == 0"
                v-model="matched_info.isSelect"
                @on-change="(e) => handleMatchedSelect(matched_info, e)"
                >选择</Checkbox
              >
                <Checkbox
                v-show="matched_info.produce_status != 0"
                v-model="matched_info.del_isSelect"
                @on-change="(e) => MatchedSelect(matched_info, e)"
                class="del_check"
                >选择</Checkbox
              >
            </div>
            <span>图号：{{ matched_info.image_number }}</span>
          </Col>
          <Col span="3">
            <span>产品名称：{{ matched_info.product_name }}</span>
          </Col>
          <Col span="3">
            <span>区域：{{ matched_info.region }}</span>
          </Col>
          <Col span="2">
            <span>{{
              matched_info.matching_status == 0
                ? "未匹配"
                : matched_info.matching_status == 1
                ? "匹配中"
                : "匹配完成"
            }}</span>
          </Col>
          <Col style="display:flex;justify-content: space-between;" span="6">
            <span v-if="matched_info.matching_status == 2">
              <Button
                @click="handleGoProduction(2, matched_info)"
                type="primary"
                size="small"
                :disabled="matched_info.produce_status != 0"
                >下生产</Button
              >
            </span>

            <div>
              总计
              <span style="color:red">{{ matched_info.num }}</span>
              条数据
            </div>
            <div>
              <Button
                @click="handleShowCurrencyMatched(matched_info)"
                size="small"
                type="text"
                >{{ matched_info.isCurrenct ? "收缩" : "展开" }}</Button
              >
              <Icon
                size="20"
                :type="
                  matched_info.isCurrenct
                    ? 'md-arrow-dropdown'
                    : 'md-arrow-dropright'
                "
                style="vertical-align: middle;"
              />
            </div>
          </Col>
        </Row>
        <Row style="margin-top:20px" v-if="matched_info.isCurrenct">
          <Col span="4">
            <span>区域名称：</span>
            <span>
              <Select
                filterable
                multiple
                transfer
                clearable
                filter-by-label
                v-model="matchedInfo.region"
                :max-tag-count="2"
                size="small"
                style="width: 150px"
              >
                <Option
                  v-for="(item, index) in regionMatchedList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </span>
          </Col>
          <Col span="4">
            <span>房号：</span>
            <span>
              <Select
                filterable
                multiple
                transfer
                clearable
                filter-by-label
                v-model="matchedInfo.number"
                :max-tag-count="2"
                size="small"
                style="width: 150px"
              >
                <Option
                  v-for="(item, index) in numberMatchedList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </span>
          </Col>
          <Col span="4">
            <span>部件名称：</span>
            <span>
              <Select
                filterable
                multiple
                transfer
                clearable
                filter-by-label
                v-model="matchedInfo.part_name"
                :max-tag-count="2"
                size="small"
                style="width: 150px"
              >
                <Option
                  v-for="(item, index) in partNameMatchedList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </span>
          </Col>
          <Col span="2">
            <Button
              @click="getMatchedDetailList(matched_info)"
              size="small"
              type="primary"
            >
              搜索
            </Button>
          </Col>
        </Row>
        <div v-if="matched_info.isCurrenct">
        
       
            <Table
              :columns="matchedSheetTableColumns"
              border
              :max-height="500"
              :data="matchedDetailList"
            >
            </Table>
        </div>
      </div>
    </div>
    <Modal v-model="processModal" title="下生产">
      <div>
        <div class="process_modal">
          <span>生产人员:</span>
          <Select
            v-model="process_man"
            filterable
            filter-by-label
            clearable
            style="width: 150px"
          >
            <Option
              v-for="item in processManList"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            ></Option>
          </Select>
        </div>
        <div class="process_modal">
          <span>选择时间:</span>
          <DatePicker
            type="date"
            :options='options'
            v-model="process_start_time"
            placeholder="年/月/日"
            style="width: 150px"
          ></DatePicker>
          至
          <DatePicker
            type="date"
              :options='options'
            v-model="process_end_time"
            placeholder="年/月/日"
            style="width: 150px"
          ></DatePicker>
        </div>
      </div>
      <div slot="footer">
        <Button
          @click="processModal = false"
          type="primary"
          ghost
          style="margin-right: 10px"
          >取消</Button
        >
        <Button
          @click="handleProcess"
          type="primary"
          style="margin-right: 10px"
          :disabled="process_control"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal v-model="showDel" title="" @on-ok='important_del' :closable='false' style="text-align:center" :width='30'>
      <div style="margin-top:30px"><span style="margin-right:10px">用户姓名:</span><Input v-model="delData.user_name" style="width:70%"></Input></div>
      <div style="margin-top:30px"><span style="margin:0 10px 0 23px">密码:</span><Input v-model="delData.password" style="width:70%"></Input></div>
    </Modal>
  </div>
</template>

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

export default {
  name: "",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      delData:{
        regionList:[],
        user_name:'',
        password:'',
      },
      options:{},
      project_number: this.$route.query.project_number,
      project_name: this.$route.query.project_name,
      isMatchedSelectAll: false,
      matchedInfo: {
        id: this.$route.query.id,
        image_number: [],
        product_name: [],
        region: [],
        number: [],
        part_name: [],
        t_region:[],
      },
      urlMatchedList: [],
      productMatchedList: [],
      regionMatchedList: [],
      numberMatchedList: [],
      partNameMatchedList: [],
      matchedDetailList: [],
      matchedList: [],
      matchedSheetTableColumns: [
         { title: "序号", align: "center", type: "index", minWidth: 80 },
        { title: "楼栋", align: "center",minWidth: 100,key:'house' },
        { title: "单元", align: "center",minWidth: 100,key:'unit' },
        { title: "楼层", align: "center", minWidth: 100,key:'layer'},
         { title: "区域", align: "center", minWidth: 100,key:'region'},
          { title: "户型", align: "center", minWidth: 100,key:'household'},
          { title: "房号", align: "center", minWidth: 100,key:'house_number'},
           { title: "生产数量", align: "center", minWidth: 100,key:'product_num'},
          { title: "组合名称", align: "center", key: "compose_name", minWidth: 100 },
        { title: "部件名称", align: "center", key: "part_name", minWidth: 100 },
        {
          title: "产品材料",
          align: "center",
          minWidth: 100,
         key:'material_remark'
        },
        { title: "饰面名称", align: "center", key: "finish_remark", minWidth: 100 },
        { title: "毛料尺寸", align: "center", key: "wool_size", minWidth: 100 },
        
        { title: "精裁尺寸", align: "center", key: "cut_size", minWidth: 100 },
        {
          title: "数量",
          align: "center",
          key: "num",
          minWidth: 80,
        },
        {
          title: "贴皮方式",
          align: "center",
          key: "skin",
          minWidth: 90,
          render:(h,params)=>{
            return h('span',{},params.row.skin==1?'单':params.row.skin ==2?'双':'素板')
          }
        },
        {
          title: "封边",
          align: "center",
          key: "band",
          minWidth: 90,
        },
        { title: "贴皮面积", align: "center", key: "skin_area", minWidth: 100 },
        { title: "精裁面积", align: "center", key: "cut_area", minWidth: 100 },
       { title: "备注", align: "center", key: "remark", minWidth: 80 },
 { title: "打印芯片", align: "center", key: "", minWidth: 100,render:(h,params)=>{
   const {row} = params;
   return h('span',{},row.chip_state==1?'是':'否')
 } },
      ], //匹配表头
      processModal: false,
      process_man: "",
      processManList: [],
      process_start_time: "",
      process_end_time: "",
      process_control: false,
      cut_order_product_ids: [],
      matchedSelectedList: [],
      delList:[],
      showDel:false,
    
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.axios("/api/user").then(
      (res) => (this.processManList = res.data.data)
    );
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData();
  },
  methods: {
    important_del(){
       this.axios.post('/api/delete_cut_order_product_2',{id:[...this.delList],...this.delData}).then(res=>{
         if(res.code == 200){
           this.$Message.success(res.msg);
           this.delList = [];
           this.isMatchedSelectAll=false;
           this.initData();
         }
       })
    },
    handelDel(){
        if(this.delList.length == 0){
        return this.$Message.warning('请选择要删除的数据')
      }
        this.confirmDelete({
        content: '强制删除么？',
        then: () => {
          this.showDel = true;
        }
      })
    },
    handleMatchedSelectAll(){
 this.isMatchedSelectAll = !this.isMatchedSelectAll;
 this.matchedSelectedList = [];
 
      this.matchedList.map((v) => {
        if (v.produce_status == 0) {
          v.isSelect = this.isMatchedSelectAll;
          if(v.isSelect){
            this.matchedSelectedList.push(v.id)
  
          }
        }
      });
    },
    handleMatchedSelect(row, e) {
      row.isSelect = e;
      console.log(row);
      let flag = true;
      this.matchedSelectedList = [];

      this.matchedList.map((v) => {
        if (v.produce_status == 0) {
          if (v.isSelect) {
            this.matchedSelectedList.push(v.id);

          } else {
            flag = false;
          }
        }
      });
      this.isMatchedSelectAll = flag;
      this.cut_order_product_ids = this.matchedSelectedList;
      console.log(this.cut_order_product_ids);
    },
MatchedSelect(row,e){
  row.del_isSelect = e;
      console.log(row);
      console.log(this.matchedList)
      this.delList = [];
  this.matchedList.forEach(v=>{
    if(v.del_isSelect){
          this.delList.push(v.id);
    }
  })

},
    back() {
      this.$router.go(-1);
    },
    handleGoProduction(type, row) {
      if (this.matchedSelectedList.length == 0&&type==1) {
        return this.$Message.warning("请选择");
      }
     
      if (type === 2) {
        this.cut_order_product_ids = [row.id];
      
      } else {
        this.cut_order_product_ids = this.matchedSelectedList;
       
      }
     this.axios.post('/api/bst_pull',{type:-1,cut_order_product_ids:this.cut_order_product_ids,order_no:this.$route.query.project_number}).then(res=>{
          if(res.code == 200){
           this.processModal = true;
             let time = [];
             res.data.forEach(v=>{
                 time.push(v*1000);
             })
            //  console.log(Date.parse(new Date()))
              this.options = {
        disabledDate(date) {
          return date && (date.valueOf() < time[0]||date.valueOf()>time[1]);
        }
      }
          }
        })
      
    },
    handleProcess() {
      this.process_control = true;
      console.log(this.cut_order_product_ids);
      this.axios({
        method: "post",
        url: "/api/bst_pull",
        data: {
          cut_order_product_ids: this.cut_order_product_ids,
          process_man: this.process_man,
          process_start_time: this.func.replaceDateNoHMS(
            this.process_start_time
          ),
          process_end_time: this.func.replaceDateNoHMS(this.process_end_time),
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.processModal = false;
          this.matchedSelectedList = [];
          this.initData();
        }
        setTimeout(() => {
          this.process_control = false;
        }, 500);
      });
    },
    initData() {
      this.axios
        .post("/api/bst_matching_on_list_2", 
        {
            id: this.matchedInfo.id,
            image_number: this.matchedInfo.image_number,
            product_name: this.matchedInfo.product_name,
            region:this.matchedInfo.t_region
          },
        )
        .then((res) => {
          this.matchedList = [];
          res.data.list.map((v) => {
            v.isCurrenct = false;
          });
          this.urlMatchedList = res.data.image_number;
          this.productMatchedList = res.data.product_name;
          this.regionList = res.data.region;
          // this.matchedList = res.data.list;
          res.data.list.forEach((v, index) => {
            if (v.matching_status == 2) {
              this.matchedList.push(v);
            }
          });
        });
    },
    handleHiddenMatchedDetail(row) {
      if (row.isHidden) {
        row.isHidden = !row.isHidden;
      } else {
        row.isHidden = true;
      }
      this.$forceUpdate();
    },
    handleShowCurrencyMatched(row) {
      if (row.isCurrenct) {
        row.isCurrenct = !row.isCurrenct;
      } else {
        this.matchedList.map((v) => (v.isCurrenct = false));
        row.isCurrenct = true;
      }
      this.getMatchedDetailList(row);
    },
    getMatchedDetailList(row) {
      row.isCurrenct &&
        this.axios
          .post("/api/bst_matching_on_detail_2", {
            cut_order_product_id: row.id,
            id: this.matchedInfo.id,
            number: this.matchedInfo.number,
            part_name: this.matchedInfo.part_name,
            region: this.matchedInfo.region,
          })
          .then((res) => {
            this.regionMatchedList = res.data.region;
            this.numberMatchedList = res.data.number;
            this.partNameMatchedList = res.data.part_name;
            this.matchedDetailList = res.data.list[0].detail;
          });
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.context-tabs {
  position: relative;
  max-height: 650px;
  overflow: hidden;
  overflow-y: auto;
  padding: 15px;
  margin: 10px;
  margin-bottom: 30px;
  border-radius: 5px;
  box-shadow: 1px 1px 5px 1px #999;
}
.matched-block {
  padding: 15px;
  margin-bottom: 30px;
  background-color: #e9ecef;
  border-radius: 5px;
}
.process_modal {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
/deep/.del_check .ivu-checkbox .ivu-checkbox-inner{
  border-radius: 50%;
}
</style>