kd-aiot-frontend-aps/src/views/productionPlan/workOrderPublish.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="page-title">
        <el-page-header @back="back" content="发布工单"> </el-page-header>
      </div>

      <el-descriptions title="" :column="6" border class="mb-20">
        <el-descriptions-item label="计划编号">{{
          infoData.code
        }}</el-descriptions-item>
        <el-descriptions-item label="计划类型">{{
          planType[infoData.planType]
        }}</el-descriptions-item>
        <el-descriptions-item label="产品编码">{{
          infoData.productCode
        }}</el-descriptions-item>
        <el-descriptions-item label="牌号">{{
          infoData.brandNo
        }}</el-descriptions-item>
        <el-descriptions-item label="型号">{{
          infoData.model
        }}</el-descriptions-item>
        <el-descriptions-item label="生产版本">{{
          infoData.produceVersionName
        }}</el-descriptions-item>
        <el-descriptions-item label="工艺路线名称">{{
          infoData.routingName
        }}</el-descriptions-item>
        <el-descriptions-item label="工艺路线版本">{{
          infoData.routingVersion
        }}</el-descriptions-item>
        <el-descriptions-item label="产品数量"
          >{{ infoData.productNum }}PCS</el-descriptions-item
        >
        <el-descriptions-item label="产品重量"
          >{{ infoData.productWeight
          }}{{ infoData.productUnitWeight }}</el-descriptions-item
        >
        <el-descriptions-item label="要求成型数量"
          >{{ infoData.requiredFormingNum }}PCS</el-descriptions-item
        >
        <el-descriptions-item label="要求成型重量"
          >{{ infoData.requiredFormingWeight
          }}{{ infoData.productUnitWeight }}</el-descriptions-item
        >
      </el-descriptions>

      <!-- <div class="rules-box">
        <div class="rule-label">工单生成规则</div>
        <div class="rule-wrapper">
          <div class="content">
            <div class="select-box" v-for="(item, index) in rules" :key="index">
              <el-radio-group v-model="item.value" v-if="item.type === 'radio'">
                <el-radio
                  v-for="(itm, idx) in item.list"
                  :key="idx"
                  :label="itm.label"
                ></el-radio>
              </el-radio-group>
              <el-checkbox-group v-model="item.value" v-else>
                <el-checkbox
                  v-for="(itm, idx) in item.list"
                  :key="idx"
                  :label="itm.label"
                  :disabled="
                    itm.lastDisabled
                      ? item.value.length < item.list.length - 1
                      : false
                  "
                ></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="btn-box">
            <el-tooltip
              placement="top-start"
              title="标题"
              width="200"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <el-button type="text" icon="el-icon-question"></el-button>
            </el-tooltip>
            <el-button type="primary" plain>一键生成方案</el-button>
          </div>
        </div>
      </div> -->
      <planView key="first" :infoData="infoData" :orderList="orderList" />
      <!-- <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="默认" name="first"
          ><planView key="first" :infoData="infoData"
        /></el-tab-pane>
        <el-tab-pane
          v-for="(item, index) in planList"
          :label="item.label"
          :name="index"
          ><planView :key="index" :infoData="infoData"
        /></el-tab-pane>
      </el-tabs> -->
    </el-card>
  </div>
</template>

<script>
  import planView from './components/plan-view';
  import { getById, getReleaseInfoById } from '@/api/productionPlan/index';
  export default {
    components: { planView },
    data () {
      return {
        activeName: 'first',
        planList: [],
        rules: [
          {
            type: 'radio',
            value: '',
            list: [
              { label: '多设备优先', value: 0 },
              { label: '多班次优先', value: 1 }
            ]
          },
          {
            type: 'checked',
            value: [],

            list: [
              { label: '设备产能优先', value: 0 },
              { label: '最早开始时间优先', value: 1 },
              { label: '开始时间优先', value: 2, lastDisabled: true }
            ]
          },
          {
            type: 'checked',
            value: [],
            list: [
              { label: '非空闲设备可用', value: 0 },
              { label: '检修设备可用', value: 1 },
              { label: '检修设备优先', value: 1, lastDisabled: true }
            ]
          },
          {
            type: 'radio',
            value: '',
            list: [{ label: '末单均衡', value: 0 }]
          }
        ],
        infoData: {},
        orderList: [],
        planType: ['内销计划', '外销计划'],
        id: null
      };
    },
    methods: {
      back () {
        if (this.type == 2) {
          this.$router.go(-1);
          return;
        }
        this.$confirm('返回后将清空所有方案，是否要继续？', '提示').then(() => {
          this.$router.go(-1);
        });
      },
      async getInfo () {
        const data = await getById(this.id);

        this.infoData = data;
      },
      async getReleaseInfoById () {
        const data = await getReleaseInfoById(this.id);

        this.infoData = data.productionPlan;

        this.orderList = data.workOrderList;
      }
    },
    created () {
      const { query = {} } = this.$route;

      this.type = query.type;
      this.id = query.id;
      if (query.type == 2) {
        this.getReleaseInfoById();
      } else {
        this.getInfo();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .rules-box {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    .rule-label {
      font-size: 18px;
      font-weight: bold;
    }
    .rule-wrapper {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .content {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 10px;

        .select-box {
          border: 1px solid #ccc;
          padding: 5px 10px;
          margin: 0 10px 10px 0;
        }
      }

      .btn-box {
        display: flex;
        justify-content: space-between;
        width: 160px;
      }
    }
  }

  .mb-20 {
    margin-bottom: 20px;
  }
</style>