kd-aiot-frontend-aps/src/views/workOrder/components/details.vue

<template>
  <ele-modal
    :width="modelWidth"
    :visible.sync="detailsVisible"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :maxable="true"
    :title="'信息'"
    append-to-body
    :before-close="cancelDetails"
  >
    <div class="form-wrapper">
      <el-tabs
        v-model="dotLineActiveTab"
        type="border-card"
        class="dot-line-tabs"
      >
        <el-tab-pane label="详情" name="detail">
          <el-form
            ref="form"
            :model="form"
            label-position="right"
            label-width="107px"
          >
            <el-row
              :gutter="10"
              class="basic"
              type="flex"
              style="flex-wrap: wrap"
              v-for="(el, index) in fieldList"
              :key="index"
            >
              <el-col
                :xs="6"
                :sm="6"
                :md="6"
                :lg="6"
                :xl="6"
                v-for="item in el"
                :key="item.prop"
              >
                <el-form-item :label="item.label">
                  <!-- <div class="item_label">{{ current[item.prop] }}</div> -->
                  <el-input :value="fieldValue(item.prop)" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                <el-form-item label="所属工厂:">
                  <el-input v-model="form.factoryName" :readonly="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                <el-form-item label="所属工作中心:">
                  <el-select
                    style="width: 100%"
                    v-model="form.workCenterId"
                    placeholder="请选择"
                    @change="changeWork"
                    disabled
                  >
                    <el-option
                      v-for="item in workCenterList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                <el-form-item label="所属班组:" required>
                  <el-select
                    style="width: 100%"
                    v-model="form.teamId"
                    placeholder="请选择"
                    @change="changeGroups"
                    disabled
                  >
                    <el-option
                      v-for="item in teamList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="报工类型:" required>
                <el-radio-group v-model="form.singleReport" disabled>
                  <!-- v-if="clientEnvironmentId != 2" -->
                  <el-radio :label="1">单件报工</el-radio>
                  <el-radio :label="0">批量报工</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="派单方式:" prop="taskAss">
                <!-- @change="changeDispatch" -->
                <el-radio-group v-model="form.taskAss" disabled>
                  <el-radio :label="1">生产订单派单</el-radio>
                  <el-radio :label="0">工序任务派单</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row v-if="form.taskAss == 1">
              <el-col :span="24">
                <el-form-item label="指派:" prop="assignType">
                  <el-radio-group
                    v-model="form.assignType"
                    size="mini"
                    @change="assignRadio"
                    disabled
                  >
                    <el-radio-button :label="1">工位</el-radio-button>
                    <!-- <el-radio-button :label="2">人员</el-radio-button> -->
                    <el-radio-button :label="3">产线</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <!-- <el-form-item label="工位:" v-if="form.assignType == 1">
            <el-select
              class="ele-block"
              v-model="form.workstationIds"
              placeholder="请选择工位"
              size="mini"
              multiple
              disabled
              filterable
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.name + '（' + item.code + '）'"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->

              <el-form-item label="工位:" v-if="form.assignType == 1">
                <el-input
                  :value="
                    stationList
                      .filter((s) => form.workstationIds?.includes(s.id))
                      .map((s) => s.name)
                      .join('、')
                  "
                  disabled
                />
              </el-form-item>

              <el-form-item label="人员:" v-if="form.assignType == 2">
                <el-select
                  class="ele-block"
                  v-model="form.crewIds"
                  placeholder="请选择人员"
                  size="mini"
                  filterable
                  multiple
                  disabled
                >
                  <el-option
                    v-for="item in crewList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="产线:" v-if="form.assignType == 3" required>
            <el-select
              class="ele-block"
              v-model="form.factoryLineIds"
              placeholder="请选择产线"
              size="mini"
              filterable
              multiple
              disabled
            >
              <el-option
                v-for="item in productionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
              <el-form-item label="工位:" v-if="form.assignType == 3">
                <el-input
                  :value="
                    productionList
                      .filter((s) => form.factoryLineIds?.includes(s.id))
                      .map((s) => s.name)
                      .join('、')
                  "
                  disabled
                />
              </el-form-item>
            </el-row>

            <el-tabs
              class="process_list"
              v-model="processId"
              type="border-card"
              @tab-click="handleClick"
              v-show="form.taskAss == 0"
              v-loading="tabsLoading"
            >
              <el-tab-pane
                v-for="(item, index) in processList"
                :key="item.id"
                :label="item.name"
                :name="item.id"
              >
                <ele-pro-table
                  class="table"
                  :ref="`tableRef${index}`"
                  :columns="columns"
                  :datasource="item.list"
                  cache-key="systemRoleTable"
                  :pageSize="20"
                  v-loading="tabLoading"
                  :selection.sync="item.selection"
                  row-key="id"
                >
                  <template v-slot:toolbar>
                    <!-- <el-button
                  type="primary"
                  @click="dispatch(item, 1)"
                  :loading="toolbarLoading"
                >
                  派单
                </el-button>
                <el-button
                  type="primary"
                  @click="dispatch(item, 2)"
                  :loading="toolbarLoading"
                >
                  撤回
                </el-button>
                <el-button
                  type="primary"
                  @click="dispatch(item, 3)"
                  :loading="toolbarLoading"
                >
                  保存
                </el-button> -->

                    <div style="display: inline-block">
                      <span
                        class="text"
                        style="
                          font-weight: bold;
                          font-size: 14px;
                          margin-right: 8px;
                        "
                        >指派:</span
                      >
                      <el-radio-group
                        v-model="item.assignType"
                        size="mini"
                        @change="(e) => changeRadio(e, index)"
                      >
                        <el-radio-button
                          :label="1"
                          :disabled="radioBun(item, 'stationDis')"
                          >工位</el-radio-button
                        >
                        <!-- <el-radio-button
                      :label="2"
                      :disabled="radioBun(item, 'staffDis')"
                      >人员</el-radio-button
                    > -->
                        <el-radio-button
                          :label="3"
                          :disabled="radioBun(item, 'lineDis')"
                          >产线</el-radio-button
                        >
                      </el-radio-group>
                    </div>

                    <div
                      style="margin-left: 50px; display: inline-block"
                      v-if="timeSlot(item)"
                    >
                      时间段: {{ item.startDate }} ----- {{ item.endDate }}
                    </div>
                  </template>
                  <template v-slot:quantity="{ row }">
                    <el-input
                      :readonly="permissions(row)"
                      type="number"
                      v-model="row.quantity"
                      placeholder="请输入数量"
                      @input="(e) => handleQuantityInput(e, row, item)"
                    ></el-input>
                  </template>
                  <template v-slot:weight="{ row }">
                    <el-input
                      :readonly="permissions(row)"
                      type="number"
                      v-model="row.weight"
                      placeholder="请输入重量"
                      @input="(e) => handleWeightInput(e, row, item)"
                    ></el-input>
                  </template>
                  <template v-slot:teamTimeIds="{ row }">
                    <el-select
                      :disabled="permissions(row)"
                      multiple
                      v-model="row.teamTimeIds"
                      placeholder="班次"
                      @change="(e) => shiftSelection(e, row, item)"
                    >
                      <el-option
                        v-for="item in shiftList"
                        :key="item.id"
                        :label="item.dutyName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </template>
                  <template v-slot:startTime="{ row }">
                    <el-date-picker
                      :readonly="permissions(row)"
                      class="w100"
                      v-model="row.startTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="开始时间"
                      @change="handleStartTimeChange(row, item)"
                    ></el-date-picker>
                  </template>
                  <template v-slot:endTime="{ row }">
                    <el-date-picker
                      :readonly="permissions(row)"
                      class="w100"
                      v-model="row.endTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      @change="handleEndTimeChange(row, item)"
                      placeholder="完成时间"
                    ></el-date-picker>
                  </template>

                  <template v-slot:action="{ row }">
                    <!--  :readonly="resetBtnDis(row)" -->
                    <el-popconfirm
                      title="确定要重置该条数据吗？"
                      @confirm="resetData(row, item)"
                      v-if="resetBtnDis(row)"
                    >
                      <template v-slot:reference>
                        <el-link type="primary" :underline="false">
                          重置
                        </el-link>
                      </template>
                    </el-popconfirm>
                  </template>
                </ele-pro-table>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </el-tab-pane>

        <el-tab-pane
          label="计划布点详情"
          name="dotLine"
          v-if="hasDotLineDetail"
        >
          <div class="plan-dot-line">
            <div class="top-route">
              <div class="panel-title">工艺路线</div>
              <el-empty
                v-if="dotLineTaskList.length === 0"
                description="暂无工艺路线"
              ></el-empty>
              <el-steps
                v-else
                :active="dotLineRouteStepsActive"
                space="20px"
                align-center
                finish-status="success"
                class="route-steps"
              >
                <el-step
                  v-for="(item, index) in dotLineTaskList"
                  :key="`route-step-${item._taskKey}`"
                  :title="dotLineRouteStepTitle(item, index)"
                  :class="{ active: dotLineRouteDesIndex === index }"
                ></el-step>
              </el-steps>
            </div>
            <div class="config-panel">
              <div class="panel-title">工艺配置</div>
              <el-empty
                v-if="dotLineTaskList.length === 0"
                description="暂无工艺"
              ></el-empty>
              <div v-else class="task-config-table-wrap">
                <el-table
                  :data="dotLineTaskList"
                  border
                  size="small"
                  row-key="_taskKey"
                  max-height="420"
                  class="config-table"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="60"
                    align="center"
                    class-name="process-name-cell"
                    label-class-name="config-execution-team-header"
                  />
                  <el-table-column
                    label="工序名称"
                    min-width="100"
                    show-overflow-tooltip
                    class-name="process-name-cell"
                    label-class-name="config-execution-team-header"
                    align="center"
                  >
                    <template slot-scope="{ row, $index }">
                      <span class="task-name-text">{{
                        getDotLineTaskName(row, $index)
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="执行模式"
                    min-width="100"
                    align="center"
                    label-class-name="config-execution-team-header"
                    class-name="config-meta-cell"
                  >
                    <template slot-scope="{ row }">
                      {{ executionTypeLabel(row.executionType) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="执行对象"
                    min-width="130"
                    align="center"
                    label-class-name="config-execution-team-header"
                    class-name="config-meta-cell"
                  >
                    <template slot-scope="{ row }">
                      {{ dotLineExecutionObjectDisplay(row) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="执行开始时间"
                    min-width="168"
                    align="center"
                    prop="executionStartTime"
                    label-class-name="config-execution-team-header"
                    class-name="config-meta-cell"
                  />
                  <el-table-column
                    label="执行结束时间"
                    min-width="168"
                    align="center"
                    prop="executionEndTime"
                    label-class-name="config-execution-team-header"
                    class-name="config-meta-cell"
                  />
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div slot="footer">
      <el-button plain @click="cancelDetails">取消</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import releaseMixin from '../mixins/release';
  import { parameterGetByCode } from '@/api/mainData/index';
  import { getPlanDotLine } from '@/api/productionPlan/planDotLine';

  const EXEC_TYPE_MAP = { 0: '自制', 1: '请托', 2: '委外' };
  const EXEC_TYPE = Object.freeze({
    HOMEMADE: 0,
    ENTRUST: 1,
    OUTSOURCE: 2
  });
  export default {
    components: {},
    props: {
      current: {
        type: Object,
        default: () => {}
      },
      detailsVisible: {
        type: Boolean,
        default: false
      }
    },
    mixins: [releaseMixin],
    mixinOptions: { type: 'detail' },
    data() {
      return {
        processId: '',
        tabLoading: false,
        dynamicName: '工位名称',
        form: {
          assignType: 1,
          crewIds: '',
          workstationIds: '',
          teamId: '',
          singleReport: '',
          workCenterId: '',
          taskAss: 1,
          factoryName: '',
          factoryLineIds: ''
        },
        toolbarLoading: false,
        processList: [],
        workCenterList: [],
        teamList: [],
        tabsLoading: false,
        stationList: [], // 工位的数据
        productionList: [], // 产线的数据
        crewList: [], // 人员的数据
        procTaskDis: false, // 工序任务派单选择
        firstTaskindex: '', // 首工序id 对应的工序列表数据下标
        fieldList: [
          [
            { label: '生产订单号:', prop: 'code' },
            { label: '计划编号:', prop: 'productionPlanCode' },
            { label: '工艺路线:', prop: 'produceRoutingName' },
            { label: '名称:', prop: 'productName' }
          ],
          [
            { label: '生产编号:', prop: 'productionCodes' },
            { label: '牌号:', prop: 'brandNo' },
            { label: '批次号:', prop: 'batchNo' },
            { label: '型号:', prop: 'model' }
          ],
          [
            { label: '要求生产数量:', prop: 'formingNum' },
            { label: '要求生产重量:', prop: 'initialWeight' },
            { label: '计划开始时间:', prop: 'planStartTime' },
            { label: '计划结束时间:', prop: 'planCompleteTime' }
          ],
          [
            { label: 'BOM版本:', prop: 'bomCategoryName' },
            { label: 'BOM类型:', prop: 'produceType' },
            { label: '首工序:', prop: 'firstTaskName' },
            { label: '创建时间:', prop: 'createTime' }
          ],
          [
            { label: '机型:', prop: 'modelKey' },
            { label: '颜色:', prop: 'colorKey' },
            { label: '派单人:', prop: 'dispatcher' },
            { label: '派单时间:', prop: 'dispatcherTime' }
          ],
          [{ label: '生产要求:', prop: 'productionRequirements' }]
        ],
        shiftList: [],
        dateValue: '',
        orderDis: false, // 生产订单派单
        singleDis: false, // 单个报工
        batchDis: false, // 批量报工
        isDispatchRow: {}, // 查询是否派单数据
        time_calc_code: '0', // 是否进行时间赋值 0 否 1 是
        isTask: true,
        dotLineTaskList: [],
        hasDotLineDetail: false,
        dotLineActiveTab: 'detail'
      };
    },
    computed: {
      fieldValue() {
        return (field) => {
          let value = this.current[field];
          // if (field == 'modelKey' || field == 'colorKey') {
          //   return value;
          // }
          if (field == 'produceType') {
            if (value == 1) {
              return 'PBOM';
            }
            if (value == 2) {
              return 'MBOM';
            }
            if (value == 3) {
              return 'ABOM';
            }
          }
          return value || '';
        };
      },
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      userInfo() {
        return this.$store.state.user.info;
      },
      modelWidth() {
        // if(this.form.taskAss == 1){
        //   return '1000px'
        // }
        return '85vw';
      },
      // 重置按钮 的置灰权限 没有进行操作跟派单的数据 置灰
      resetBtnDis() {
        return (row) => {
          if (!row.status) return false;
          let flag = row.status.code != 1;
          return flag;
        };
      },
      // 指派单选框操作 已派单的 其它两个按钮不能操作
      radioBun() {
        return (row, type) => {
          if (!row.radioBun) return false;
          let flag = row.radioBun[type];
          return flag;
        };
      },
      // 列表输入框操作 已派单的不能操作
      permissions() {
        return (row) => {
          // if (!row.status) return false;
          // if (row.status.code == 1) return true;
          return true;
        };
      },
      // 时间段显示
      timeSlot() {
        return (item) => {
          if (!item.startDate || !item.endDate) {
            return false;
          }
          return true;
        };
      },
      executionTypeLabel() {
        return (val) => EXEC_TYPE_MAP[val] ?? '';
      },
      /** 与计划布点弹窗一致：首个未配置执行模式的工序为当前步；全部已配置则全部 finish */
      dotLineRouteStepsActive() {
        const list = this.dotLineTaskList;
        if (!list.length) return 0;
        for (let i = 0; i < list.length; i++) {
          if (!this.isDotLineTaskDone(list[i])) return i;
        }
        return list.length;
      },
      dotLineRouteDesIndex() {
        const list = this.dotLineTaskList;
        if (!list.length) return -1;
        const a = this.dotLineRouteStepsActive;
        return a >= list.length ? list.length - 1 : a;
      },
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          // {
          //   width: 45,
          //   type: 'selection',
          //   columnKey: 'selection',
          //   align: 'center',
          //   fixed: 'left',
          //   reserveSelection: true
          // },
          {
            prop: 'name',
            label: this.dynamicName,
            align: 'center',
            width: 200
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            width: 200
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            width: 150,
            formatter: (row) => {
              if (!row.status) return '';
              return row.status.desc || '';
            }
          },
          {
            slot: 'quantity',
            prop: 'quantity',
            label: '数量',
            align: 'center',
            width: 140
          },
          {
            slot: 'weight',
            prop: 'weight',
            label: `重量(${this.current.newWeightUnit})`,
            align: 'center',
            width: 140
          },
          {
            slot: 'teamTimeIds',
            prop: 'teamTimeIds',
            label: '班次',
            align: 'center',
            minWidth: 220
          },
          {
            slot: 'startTime',
            prop: 'startTime',
            label: '计划开始时间',
            align: 'center',
            minWidth: 240
          },
          {
            slot: 'endTime',
            prop: 'endTime',
            label: '计划完成时间',
            align: 'center',
            minWidth: 240
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ];
      }
    },
    watch: {},
    created() {
      // 时间计算规则code
      this.form = this.current;
      this.form.taskAss = this.current.dispatchingMethod;
      this.getCode();
      this.workCenterData(); // 查询工作中心
      this.getClassesData(); // 查询班次
      this.queryCheckExists(); // 查询是否派单
      // this.form.singleReport = this.clientEnvironmentId == 2 ? 0 : '';
      this.dateValue = this.getFormattedDate();
      this.loadDotLineData();
    },
    methods: {
      getCode() {
        parameterGetByCode({
          code: 'time_calculation_rules'
        }).then((res) => {
          if (res) {
            this.time_calc_code = res.value || '0';
          }
        });
      },

      async getDispatchMethod(code) {
        await parameterGetByCode({ code }).then((res) => {
          if (res) {
            this.form.taskAss = res.value == '0' ? 0 : 1;
          }
        });
      },

      async getAssignmentMethod(code) {
        await parameterGetByCode({ code }).then((res) => {
          if (res) {
            this.form.assignType =
              res.value == '0' ? 0 : res.value == '1' ? 1 : 2;
          }
        });
      },

      cancelDetails() {
        this.$emit('update:detailsVisible', false);
      },

      async loadDotLineData() {
        if (!this.form.productionPlanId) {
          this.resetDotLineState();
          return;
        }
        try {
          const planData = await getPlanDotLine({
            planId: this.form.productionPlanId
          });
          const details = planData?.detailList;
          if (!Array.isArray(details) || details.length === 0) {
            this.resetDotLineState();
            return;
          }
          this.hasDotLineDetail = true;
          this.dotLineTaskList = details
            .slice()
            .sort((a, b) => (a.taskSort ?? 0) - (b.taskSort ?? 0))
            .map((item, i) => this.normalizeDotLineItem(item, i));
        } catch {
          this.resetDotLineState();
        }
      },

      resetDotLineState() {
        this.hasDotLineDetail = false;
        this.dotLineTaskList = [];
      },

      normalizeDotLineItem(item, index) {
        return {
          ...item,
          _taskKey: item.id ?? `detail-${item.taskId ?? index}`,
          executionStartTime: this.formatDotLineTime(item.executionStartTime),
          executionEndTime: this.formatDotLineTime(item.executionEndTime),
          executionType:
            item.executionType != null ? Number(item.executionType) : undefined
        };
      },

      getDotLineTaskName(item, index) {
        return item.taskName || item.name || `工艺${index + 1}`;
      },

      dotLineExecutionObjectDisplay(row) {
        const t =
          row.executionType != null ? Number(row.executionType) : undefined;
        if (t === EXEC_TYPE.HOMEMADE) return row.executionTeamName ?? '';
        if (t === EXEC_TYPE.ENTRUST) return row.executionFactoryName ?? '';
        return '';
      },

      dotLineRouteStepTitle(item, index) {
        return (
          item.taskTypeName || item.taskName || item.name || `工艺${index + 1}`
        );
      },

      isDotLineTaskDone(item) {
        return item.executionType != null && item.executionType !== '';
      },

      formatDotLineTime(val) {
        if (val == null || val === '') return '';
        const str = String(val).trim();
        if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(str)) return str;
        const d = new Date(val);
        if (Number.isNaN(d.getTime())) return '';
        const p = (n) => String(n).padStart(2, '0');
        return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(
          d.getHours()
        )}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .top-box {
    display: flex;
    margin-bottom: 10px;
    .item-box {
      flex: 1;
    }
  }

  .radio-box {
    margin: 10px 0;
  }

  .table {
    margin-top: 20px;
  }

  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: none;
  }

  ::v-deep .el-input.is-disabled .el-input__inner {
    color: #ab7777;
  }

  .plan-dot-line,
  .top-route,
  .config-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .plan-dot-line {
    min-height: 360px;
  }

  .top-route,
  .config-panel {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 12px;
    background: #fff;
  }

  .top-route {
    overflow: visible;
  }

  .config-panel {
    margin-top: 12px;
  }

  .panel-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .route-steps {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    box-sizing: content-box;
  }

  .route-steps ::v-deep {
    .el-steps {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
    }
    .el-step {
      flex-shrink: 0;
    }
    .el-step__title {
      font-size: clamp(16px, 2.2vw, 16px);
      line-height: 1.35;
      max-width: 8em;
      margin-left: auto;
      margin-right: auto;
      white-space: normal;
      word-break: break-all;
    }
    .el-step.active .el-step__title {
      color: #409eff;
      font-weight: 600;
    }
    .el-step__head.is-success {
      color: #0c7741;
      border-color: #0c7741;
    }
    .el-step__title.is-success,
    .el-step__description.is-success {
      color: #0c7741;
    }
    .el-step__line {
      top: 14px;
    }
    .el-step__icon {
      width: 30px;
      height: 30px;
    }
    .el-step__main {
      padding-top: 8px;
      margin-top: 0;
    }
    .el-step__description {
      margin-top: 0;
      padding-right: 0;
    }
  }

  @media (max-width: 576px) {
    .top-route,
    .config-panel {
      padding: 8px;
    }
  }

  .task-config-table-wrap {
    width: 100%;
  }

  .config-table ::v-deep {
    .el-table th > .cell,
    .el-table td > .cell {
      font-size: 14px;
      text-align: center;
    }
    th.config-execution-team-header > .cell,
    td.config-meta-cell > .cell {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
    }
    .el-table__body .cell {
      padding-left: 6px;
      padding-right: 6px;
    }
    th.process-name-header > .cell,
    td.process-name-cell .task-name-text {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
    }
  }
</style>