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

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="page-title">
        <el-page-header @back="$router.go(-1)" content="发布工单">
        </el-page-header>
      </div>

      <el-descriptions title="" :column="6" border>
        <el-descriptions-item label="计划编号"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="计划类型"
          >18100000000</el-descriptions-item
        >
        <el-descriptions-item label="产品编码">苏州市</el-descriptions-item>
        <el-descriptions-item label="牌号">苏州市</el-descriptions-item>
        <el-descriptions-item label="型号">苏州市</el-descriptions-item>
        <el-descriptions-item label="生产版本">苏州市</el-descriptions-item>
        <el-descriptions-item label="工艺路线名称">苏州市</el-descriptions-item>
        <el-descriptions-item label="工艺路线版本">苏州市</el-descriptions-item>
        <el-descriptions-item label="产品数量">苏州市</el-descriptions-item>
        <el-descriptions-item label="产品重量">苏州市</el-descriptions-item>
        <el-descriptions-item label="要求成型数量">苏州市</el-descriptions-item>
        <el-descriptions-item label="要求成型重量">苏州市</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>

      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="默认" name="first"
          ><planView key="first"
        /></el-tab-pane>
        <el-tab-pane
          v-for="(item, index) in planList"
          :label="item.label"
          :name="index"
          ><planView :key="index"
        /></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import planView from './components/plan-view';
  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 }]
          }
        ]
      };
    }
  };
</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;
      }
    }
  }
</style>