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

<template>
  <div>
    <Toptitle title="查看">
      <Button @click="back" type="primary" style="margin-right: 10px"
        >下生产</Button
      >
      <Button @click="back" type="primary" ghost style="margin-right: 10px"
        >返回</Button
      >
    </Toptitle>
    <div class="context-tabs">
      <Row type="flex" align="middle" style="padding:10px 0">
        <Col span="4">
          <span>图号：</span>
          <span>
            <Select
              filterable
              multiple
              filter-by-label
              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="4">
          <span>产品名称：</span>
          <span>
            <Select
              filterable
              multiple
              filter-by-label
              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="2">
          <Button @click="back" size="small" type="primary">
            搜索
          </Button>
        </Col>
      </Row>
      <div
        v-for="matched_info in matchedList"
        :key="matched_info.number"
        class="matched-block"
      >
        <Row>
          <Col span="2">
            <Checkbox v-model="matched_info.isSelect">全选</Checkbox>
          </Col>
          <Col span="2">
            <span>图号：{{ matched_info.image_number }}</span>
          </Col>
          <Col span="2">
            <span>产品名称：{{ matched_info.product_name }}</span>
          </Col>
          <Col span="2" offset="14">
            总计
            <span style="color:red">{{ matched_info.num }}</span>
            条数据
          </Col>
          <Col span="2">
            <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;"
            />
          </Col>
        </Row>
        <Row style="margin-top:20px" v-if="matched_info.isCurrenct">
          <Col span="4">
            <span>区域名称：</span>
            <span>
              <Select
                filterable
                multiple
                transfer
                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
                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
                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="back" size="small" type="primary">
              搜索
            </Button>
          </Col>
        </Row>
        <div v-if="matched_info.isCurrenct">
          <div
            v-for="(matched_detail, index) in matchedDetailList"
            :key="index"
          >
            <Row type="flex" align="middle">
              <Col span="10" style="padding:10px 0">
                <span>匹配信息：</span>
                <span>匹配信息：</span>
                <span>匹配信息：</span>
                <span>匹配信息：</span>
                <span>匹配信息：</span>
              </Col>
            </Row>
            <Table
              :columns="matchedSheetTableColumns"
              border
              :max-height="500"
              @on-selection-change="handleSelectChange"
              :data="matched_detail.detail"
            >
            </Table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      matchedInfo: {
        image_number: "",
        product_name: "",
        region: [],
        number: [],
        part_name: [],
      },
      urlMatchedList: [],
      productMatchedList: [],
      regionMatchedList: [],
      numberMatchedList: [],
      partNameMatchedList: [],
      matchedList: [],
      matchedSheetTableColumns: [
        { title: "全选", align: "center", minWidth: 60, type: "selection" },
        { title: "序号", align: "center", type: "index", minWidth: 60 },
        { title: "区域名称", align: "center", key: "region", minWidth: 100 },
        { title: "房号", align: "center", key: "number", minWidth: 60 },
        { title: "部件名称", align: "center", key: "part_name", minWidth: 80 },
        { title: "行号", align: "center", key: "line", minWidth: 60 },
        { title: "木皮1", align: "center", key: "skin1", minWidth: 60 },
        {
          title: "原材料",
          align: "center",
          minWidth: 80,
          render: (h, params) => {
            return h("span", {}, params.row.board1 + params.row.board2);
          },
        },
        { title: "木皮2", align: "center", key: "skin2", minWidth: 80 },
        { title: "毛料尺寸", align: "center", key: "wool_size", minWidth: 80 },
        {
          title: "原料数量",
          align: "center",
          key: "wool_number",
          minWidth: 80,
        },
        { title: "精裁尺寸", align: "center", key: "cut_size", minWidth: 80 },
        {
          title: "零部件数量",
          align: "center",
          key: "cut_number",
          minWidth: 90,
        },
        { title: "贴皮面积", align: "center", key: "stick", minWidth: 80 },
        { title: "精裁面积", align: "center", key: "cut", minWidth: 80 },
        { title: "工艺要求", align: "center", key: "remark", minWidth: 80 },
      ], //匹配表头
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    handleShowCurrencyMatched() {},
    handleSelectChange(selection) {},
  },
  // 监听属性 类似于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;
}
</style>