|
@@ -1,6 +1,202 @@
|
|
|
<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>
|
|
|
|
|
@@ -9,43 +205,104 @@
|
|
|
// 例如:import 《组件名称》 from '《组件路径》';
|
|
|
|
|
|
export default {
|
|
|
- name:'',
|
|
|
- components:{
|
|
|
-
|
|
|
- },
|
|
|
- props:{},
|
|
|
-// import引入的组件需要注入到对象中才能使用
|
|
|
- data () {
|
|
|
+ name: "",
|
|
|
+ components: {},
|
|
|
+ props: {},
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
+ data() {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
-// 生命周期 - 创建完成(可以访问当前this实例)
|
|
|
- created () {
|
|
|
-
|
|
|
- },
|
|
|
-// 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
- mounted () {
|
|
|
-
|
|
|
+ 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缓存功能,这个函数会触发
|
|
|
-}
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
+ updated() {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed() {}, // 生命周期 - 销毁完成
|
|
|
+ activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang='scss' scoped>
|
|
|
-
|
|
|
+<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>
|