kd-aiot-frontend-mes/src/views/produce/components/feeding/index.vue

<template>
  <div>
    <div v-if="isShow">
      <div class="top_fixed">
        <div
          style="display: flex; align-items: center; margin-right: 10px"
          v-if="List.length > 1"
        >
          <div class="rx-bc">
            <div class="name">批量投料时间：</div>
          </div>
          <el-date-picker
            v-model="executorTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            @change="handleCreate"
          >
          </el-date-picker>
        </div>
        <el-button
          type="primary"
          size="mini"
          :loading="loadingBtn"
          @click="save(2, 'all')"
          >一键投料(报工)</el-button
        >
        <el-button type="primary" size="mini" @click="removeCacheFn('all')"
          >清空缓存</el-button
        >
        <el-button type="primary" size="mini" @click="save(1, 'all')"
          >缓存</el-button
        >
      </div>

      <div class="feed_box" v-if="isLoad">
        <div v-for="(item, index) in List" :key="index" class="card_box">
          <div class="title_box rx-bc">
            <div class="name" v-if="!taskObj.isOrderListData">工单信息 </div>
            <div class="name" v-else> </div>

            <div class="rx-bc">
              <el-button
                type="text"
                size="mini"
                @click="outboundOrder(item.workOrderId, item)"
                >出库单</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="openPicking(item.workOrderId, item)"
                >手动添加</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="removeCacheFn(item.workOrderId)"
                >清空缓存</el-button
              >
              <el-button type="text" size="mini" @click="save(1, index)"
                >缓存</el-button
              >
            </div>
          </div>

          <workOrderBom
            :item="item"
            :isReportWork="false"
            v-if="!taskObj.isOrderListData"
          ></workOrderBom>

          <div>
            <div class="title_box rx-bc">
              <div class="name">投料时间 </div>
            </div>
            投料时间：
            <el-date-picker
              v-model="item.executorTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="margin-right: 25px; width: 190px"
            >
            </el-date-picker>

            执行人：
            <el-select
              v-model="teamId"
              placeholder="请选择班组"
              filterable
              style="width: 120px"
              @change="checkTeamList(teamId)"
            >
              <el-option
                v-for="item in teamList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="executorIdList"
              placeholder="请选择执行人"
              filterable
              multiple
              @change="changeId"
            >
              <div class="checkboxWrapper">
                <el-checkbox v-model="checked" @change="checkChange">
                  全选
                </el-checkbox>
              </div>
              <el-option
                v-for="item in teamUserList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
            <!--  -->
          </div>

          <paramBom
            v-if="item.paramDetailList.length != 0"
            :list="item.paramDetailList"
          ></paramBom>

          <!-- 设备信息 -->
          <deviceBom
            v-if="item.equipmentList.length != 0"
            :list="item.equipmentList"
          ></deviceBom>

          <!-- <productsBom
            v-if="
              item.product != null &&
              item.product != '{}' &&
              item.singleReport != 0
            "
            :itemObj="item"
            :productsObj="item.product"
          >
          </productsBom> -->

          <productsBom
            v-if="item.product.length != 0 && item.singleReport == 1"
            :itemObj="item"
            :productsObj="item.product"
          >
          </productsBom>

          <!-- <batchProductsBom
            v-if="
              item.product != null &&
              item.product != '{}' &&
              item.singleReport == 0
            "
            :itemObj="item"
            :productsObj="item.product"
          >
          </batchProductsBom> -->
          <batchProductsBom
            v-if="item.product.length != 0 && item.singleReport == 0"
            :itemObj="item"
            :productsObj="item.product"
            :isEdit="isEdit"
          >
          </batchProductsBom>

          <modelBom v-if="item.modelList.length != 0" :list="item.modelList">
          </modelBom>

          <!-- 物料清单 -->

          <instanceBom
            v-if="item.instanceList.length != 0"
            :list="item.instanceList"
            :equipmentList="item.equipmentList"
            :currentTaskDiagram="item.currentTaskDiagram"
            :workInfo="item"
            title="物料清单"
          >
          </instanceBom>

          <!-- 备料清单 -->
          <instanceBom
            v-if="item.sparePartsList.length != 0"
            :list="item.sparePartsList"
            :equipmentList="item.equipmentList"
            :currentTaskDiagram="item.currentTaskDiagram"
            :workInfo="item"
            title="备料清单"
          >
          </instanceBom>

          <semiProductJobBom
            v-if="item.semiProductList.length != 0"
            :list="item.semiProductList"
            :equipmentList="item.equipmentList"
            :currentTaskDiagram="item.currentTaskDiagram"
            :item="item"
            :isChoose="isChoose"
            :isEngrave="isEngrave"
            :isDisposal="isDisposal"
            title="物料清单"
          >
          </semiProductJobBom>

          <!-- 周转车 -->
          <turnoverBom
            v-if="item.turnover.length != 0"
            :wordItem="item"
            :list="item.turnover"
            pattern="feed"
          >
          </turnoverBom>

          <aridRegion
            v-if="item.aridRegionList.length != 0"
            :list="item.aridRegionList"
          ></aridRegion>

          <palletBom
            v-if="item.palletList.length != 0"
            :list="item.palletList"
          ></palletBom>

          <!-- // 包装物料清单 -->
          <packingBom
            v-if="item.packingList.length != 0"
            :list="item.packingList"
          ></packingBom>

          <revolvingDiskBom
            v-if="item.revolvingDiskList.length != 0"
            :list="item.revolvingDiskList"
          ></revolvingDiskBom>
        </div>
      </div>

      <pickingList
        isType="feed"
        ref="pickingListRef"
        @allSelection="allSelection"
      ></pickingList>
    </div>

    <div v-else>
      <el-empty description="批量报工，不需要投料，直接去报工取样"></el-empty>
    </div>

    <outboundOrderDialog
      ref="outboundOrderDialogRef"
      @chooseData="chooseData"
    />
  </div>
</template>

<script>
  import { workorderList } from '@/api/produce/workOrder';
  import {
    batchSave,
    feedSaveCache,
    feedGetCache,
    removeCache
  } from '@/api/produce/feeding';

  import { checkRepeatFeed } from '@/api/produce/index';

  import pickingList from '../picking/pickingList.vue';
  import packingBom from './components/packingBom.vue';
  import workOrderBom from './components/workOrderBom.vue';
  import paramBom from './components/paramBom.vue';
  import deviceBom from './components/deviceBom.vue';
  import productsBom from './components/productsBom.vue';
  import batchProductsBom from './components/batchProductsBom.vue';
  import modelBom from './components/modelBom.vue';
  import instanceBom from './components/instanceBom.vue';
  // import semiProductBom from './components/semiProductBom.vue';
  import semiProductJobBom from '@/views/produce/components/jobBooking/components/semiProductJobBom.vue';

  import turnoverBom from './components/turnoverBom.vue';
  import aridRegion from './components/aridRegion.vue';
  import palletBom from './components/palletBom.vue';
  import revolvingDiskBom from './components/revolvingDiskBom.vue';
  import outboundOrderDialog from './components/outboundOrderDialog.vue';
  import { deepClone } from '@/utils';
  import { timestampToDateTime } from '@/utils/index.js';
  import { parameterGetByCode } from '@/api/system/dictionary-data';
  import { getTeam } from '@/api/produce/job.js';
  export default {
    name: 'feeding',
    components: {
      pickingList,
      packingBom,
      workOrderBom,
      paramBom,
      deviceBom,
      productsBom,
      modelBom,
      instanceBom,
      semiProductJobBom,
      turnoverBom,
      aridRegion,
      palletBom,
      revolvingDiskBom,
      batchProductsBom,
      outboundOrderDialog
    },
    props: {
      workListIds: {
        type: Array,
        default() {
          return [];
        }
      },
      feedNeedEquipment: {}
    },

    computed: {
      taskObj() {
        return this.$store.state.user.taskObj;
      },
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    watch: {
      workListIds: {
        handler(val) {
          this.getList(val);
          console.log('1111122222', val);
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return {
        List: [],
        idsList: [],
        executorTime: '',
        isLoad: false,
        isShow: true,
        loading: null,
        loadingBtn: false,
        isEdit: false,
        isChoose: false,
        isEngrave: false,
        isDisposal: false,
        teamList: [],
        teamAllList: [],
        teamUserList: [],
        executorIdList: [],
        teamId: '',
        isDefaultExecutor: false,
        checked: false
        // feedExistNum: '',
        // feedNeedAridRegion: '',
        // feedNeedAuxiliaryEquipment: '',
        // feedNeedBoat: '',
        // feedNeedConsumableMaterial: '',
        // feedNeedEquipment: '',
        // feedNeedJunkProduct: '',
        // feedNeedMateriel: '',
        // feedNeedMeasuringEquipment: '',
        // feedNeedMould: '',
        // feedNeedProduct: '',
        // feedNeedQuality: '',
        // feedNeedReworkProduct: '',
        // feedNeedSemiProduct: '',
        // feedNeedTurnover: '',
        // feedStatus: ''
      };
    },
    mounted() {
      this.getChooseEngrave();
      if (localStorage.getItem('singleUserInfo') == '1') {
        const data = JSON.parse(localStorage.getItem('chooseUserInfo'));
        this.getTeamList(data.teamId);
      } else {
        this.getTeamList(this.$store.state.user.info.teamId);
      }
      // this.getTeamList(this.$store.state.user.info.teamId);
    },

    methods: {
      handleCreate(e) {
        if (e) {
          const list = JSON.parse(JSON.stringify(this.List));
          console.log(list);
          list.map((item) => {
            item.executorTime = e;
          });

          this.$set(this, 'List', list);
        }
      },
      getList(ids) {
        this.idsList = ids || [];
        let param = {
          ids: ids,
          taskId: this.taskObj.id
        };
        this.isLoad = false;
        workorderList(param)
          .then((res) => {
            let arr = [];
            arr = res.map((m) => {
              m.workOrderId = m.id;
              m.paramDetailList = m.paramDetailList;

              m.instanceList = []; // 物料
              // m.equipmentList = []; // 设备
              m.modelList = []; // 模具
              m.aridRegionList = []; // 干燥区
              m.packingList = []; // 包装
              m.palletList = []; // 舟皿
              m.revolvingDiskList = []; // 周转盘
              m.semiProductList = []; //半成品
              m.sparePartsList = []; //备品清单

              if (m.pickOutInList.length > 0) {
                m.pickOutInList.forEach((f) => {
                  if (f.rootCategoryLevelId == 1) {
                    m.instanceList.push(f);
                  } else if (f.rootCategoryLevelId == 4) {
                    m.modelList.push(f);
                  } else if (f.rootCategoryLevelId == 5) {
                    m.modelList.push(f);
                  } else if (f.rootCategoryLevelId == 6) {
                    m.sparePartsList.push(f);
                  } else if (f.rootCategoryLevelId == 11) {
                    m.aridRegionList.push(f);
                  } else if (f.rootCategoryLevelId == 13) {
                    m.packingList.push(f);
                  } else if (f.rootCategoryLevelId == 8) {
                    m.palletList.push(f);
                  } else if (f.rootCategoryLevelId == 26) {
                    m.revolvingDiskList.push(f);
                  } else if (
                    [23, 2, 9, 28].includes(Number(f.rootCategoryLevelId))
                  ) {
                    m.semiProductList.push(f);
                  }
                });
              }

              if (m.semiProductList.length != 0) {
                m.semiProductList.forEach((item) => {
                  if (!item.confirm) {
                    item.confirm = '';
                  }
                });
              }

              // 处理字段
              if (m.quality == '') {
                m.product = '{}';
              }

              if (!Object.prototype.hasOwnProperty.call(m, 'product')) {
                m.product = '{}';
              }

              if (m.singleReport == 1) {
                m.semiProductList.map((item) => {
                  item.extInfo.taskId = '';
                  item.extInfo.taskName = '';
                });
              }

              if (m.singleReport == 0) {
                m.product.map((item) => {
                  item.extInfo.taskId = '';
                  item.extInfo.taskName = '';
                });
              }

              if (
                this.clientEnvironmentId == 3 &&
                this.taskObj.type == 6 &&
                m.singleReport == 0
              ) {
                this.isShow = false;
              } else {
                this.isShow = true;
              }

              delete m.id;
              if (this.taskObj.id) {
                m.taskId = this.taskObj.id;
                m.taskName = this.taskObj.name;
              }
              return {
                ...m
              };
            });
            console.log(arr, 'arr');
            arr.forEach((it) => {
              if (it.semiProductList.length != 0) {
                it.semiProductList.forEach((item) => {
                  if (item.extInfo && item.extInfo.taskId == -1) {
                    item.extInfo.taskId = item.extInfo.taskId + '';
                  }
                });
              }

              // if (it.pickOutInList.length != 0) {
              //   it.pickOutInList.forEach((item) => {
              //     if (item.extInfo && item.extInfo.taskId == -1) {
              //       item.extInfo.taskId = item.extInfo.taskId + '';
              //     }
              //   });
              // }
            });
            this.List = deepClone(arr);
          })
          .finally(() => {
            this.isLoad = true;
            this.getCacheFn();
          });

        this.$forceUpdate();
      },

      async getChooseEngrave() {
        await parameterGetByCode({
          code: 'choose_engrave'
        }).then((res) => {
          this.isChoose = res.value == '1' ? true : false;
        });

        await parameterGetByCode({
          code: 'batch_update_engrave'
        }).then((res) => {
          this.isEngrave = res.value == '1' ? true : false;
        });

        await parameterGetByCode({
          code: 'batch_disposal'
        }).then((res) => {
          this.isDisposal = res.value == '1' ? true : false;
        });

        await parameterGetByCode({
          code: 'default_executor'
        }).then((res) => {
          this.isDefaultExecutor = res.value == '1' ? true : false;

          if (this.isDefaultExecutor) {
            this.setDefaultIdList();
          }
        });
      },

      setDefaultIdList() {
        if (this.teamList.length != 0) {
          this.teamId = this.teamList[0].id;
          const index = this.teamList.findIndex(
            (item) => item.id == this.teamId
          );
          console.log(this.teamAllList);
          this.teamUserList = this.teamAllList[index];
          if (this.teamUserList) {
            const res = this.teamUserList.find(
              (it) => it.id == this.$store.state.user.info.userId
            );

            this.executorIdList.push(res.id);
          }
        }
      },

      changeId() {
        if (this.executorIdList.length == this.teamUserList.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },

      checkTeamList(id) {
        this.executorIdList = [];
        const index = this.teamList.findIndex((item) => item.id == id);
        this.teamUserList = this.teamAllList[index];
      },

      async getTeamList(id) {
        const ids = id.split(',');
        this.teamList = [];
        this.teamUserList = [];
        const list = ids.map((item) => getTeam(item));

        const dataList = await Promise.all(list);

        dataList.forEach((item) => {
          this.teamList.push({
            name: item.name,
            id: item.id
          });

          this.teamAllList.push(item.userVOList);
        });
      },

      outboundOrder(id, item) {
        this.$refs.outboundOrderDialogRef.open(id, item);
      },

      openPicking(id, item) {
        this.$refs.pickingListRef.open(id, item, '选择设备列表');
      },

      chooseData(listData) {
        this.$set(this.List[0], 'semiProductList', listData);
        this.$forceUpdate();

        console.log(this.List[0], 'this.List');
      },

      allSelection(id, selectList) {
        this.List.forEach((m) => {
          if (m.workOrderId == id) {
            let modelList = []; // 模具
            let instanceList = []; // 投料
            let aridRegionList = []; // 干燥区
            let equipmentList = []; // 生产设备
            let palletList = []; // 舟皿
            let revolvingDiskList = []; // 周转盘
            let semiProductList = []; // 半成品
            let turnover = []; //周转车
            let sparePartsList = []; //备品清单

            selectList.forEach((f) => {
              if (f.rootCategoryLevelId == 4) {
                equipmentList = equipmentList.concat(f);
              }
              if (f.rootCategoryLevelId == 5) {
                modelList = modelList.concat(f);
              } else if (f.rootCategoryLevelId == 1) {
                instanceList = instanceList.concat(f);
              } else if (f.rootCategoryLevelId == 11) {
                aridRegionList = aridRegionList.concat(f);
              } else if (f.rootCategoryLevelId == 6) {
                sparePartsList = sparePartsList.concat(f);
              } else if (f.rootCategoryLevelId == 7) {
                turnover = turnover.concat(f);
              } else if (f.rootCategoryLevelId == 8) {
                palletList = palletList.concat(f);
              } else if (f.rootCategoryLevelId == 26) {
                revolvingDiskList = revolvingDiskList.concat(f);
              } else if (
                [23, 2, 9, 28].includes(Number(f.rootCategoryLevelId))
              ) {
                semiProductList = semiProductList.concat(f);
              }
            });

            this.$set(m, 'modelList', modelList);
            this.$set(m, 'sparePartsList', sparePartsList);
            this.$set(m, 'instanceList', instanceList);
            this.$set(m, 'aridRegionList', aridRegionList);
            this.$set(m, 'equipmentList', equipmentList);
            this.$set(m, 'turnover', turnover);
            this.$set(m, 'palletList', palletList);
            this.$set(m, 'revolvingDiskList', revolvingDiskList);
            this.$set(m, 'semiProductList', semiProductList);

            this.$forceUpdate();
          }
        });
      },

      checkChange() {
        if (this.checked) {
          this.executorIdList = [];
          this.executorIdList = this.teamUserList.map((item) => item.id);
        } else {
          this.executorIdList = [];
        }
      },

      getCacheFn() {
        let parma = {
          workOrderIds: this.idsList,
          taskId: this.taskObj.id,
          type: 2
        };

        feedGetCache(parma).then((res) => {
          if (res.length == 0) {
            return false;
          }
          let objList = res[0].extInfo.objList;
          this.List.forEach((f, index) => {
            objList.forEach((o) => {
              if (
                f.workOrderId == o.workOrderId &&
                f.currentTaskDiagram.taskId == o.taskId
              ) {
                f['instanceList'] = o.instanceList || [];
                f['equipmentList'] = o.equipmentList || [];
                f['modelList'] = o.modelList || [];
                f['sparePartsList'] = o.sparePartsList || [];
                f['aridRegionList'] = o.aridRegionList || [];
                f['packingList'] = o.packingList || [];
                f['palletList'] = o.palletList || [];
                f['revolvingDiskList'] = o.revolvingDiskList || [];
                f['semiProductList'] = o.semiProductList || [];
                this.$set(this.List[index], 'executorTime', o.executorTime);
                this.$forceUpdate();
              }
            });
          });
        });
      },

      async save(type, index) {
        let arr = this.List.filter((L) => L.executorTime);
        if (!arr.length) {
          return this.$message.warning('请选择投料时间');
        }

        if (this.executorIdList.length == 0) {
          return this.$message.warning('执行人不能为空！');
        }

        const executorList = [];

        this.executorIdList.forEach((item) => {
          const data = this.teamUserList.find((it) => it.id == item);
          if (data) {
            executorList.push({
              userId: data.id,
              jobNumber: data.jobNumber,
              name: data.name
            });
          }
        });

        this.List = this.List.map((item) => {
          item.executorList = executorList;
          return item;
        });

        // this.List = this.List.map((item) => {
        //   item.executorList = executorList;
        //   return item;
        // });

        let deviceIs = false;
        this.List.forEach((f) => {
          f.instanceList.forEach((e) => {
            if (Object.prototype.hasOwnProperty.call(e, 'type')) {
              e.extInfo['type'] = e.type;
            }
            e.extInfo['isConsumable'] = e.isConsumable;
          });

          if (this.feedNeedEquipment == 1 && f.equipmentList.length == 0) {
            deviceIs = true;
            setTimeout(() => {
              this.$message.warning({
                message: '请工单编号：' + f.code + '添加设备',
                key: f.code
              });
            }, 500);
          }
        });
        //判断投料是否要添加设备
        if (deviceIs) {
          return;
        }

        for (let item of this.List) {
          if (
            item.currentTaskDiagram.feedNeedTurnover == 1 &&
            item.turnover.length == 0
          ) {
            setTimeout(() => {
              this.$message.warning({
                message: '请工单编号：' + item.code + '添加周转车',
                key: item.code
              });
            }, 500);

            return;
          }
        }

        for (let item of this.List) {
          if (
            item.currentTaskDiagram.feedNeedBoat == 1 &&
            item.palletList.length == 0
          ) {
            setTimeout(() => {
              this.$message.warning({
                message: '请工单编号：' + item.code + '添加舟皿',
                key: item.code
              });
            }, 500);

            return;
          }
        }

        const isCache = await this.checkCache(type);

        if (!isCache) {
          return false;
        }

        this.loading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        for (let item of this.List) {
          await checkRepeatFeed({
            currentTaskDiagram: item.currentTaskDiagram,
            workOrderId: item.workOrderId
          }).then((res) => {
            if (res.data == 0) {
              this.feedReport();
            } else {
              this.$confirm('已经有投料是否继续重复投料?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(() => {
                  this.feedReport();
                })
                .catch(() => {
                  this.loading.close();
                });
            }
            // const totalNum = Number(item.formingNum);
            // const reportNum = this.add(
            //   item.workReportInfo.notFormedNum,
            //   item.workReportInfo.formedNum
            // );
            // const totalReportNum = this.add(reportNum, Number(res));
            // if (totalReportNum > totalNum) {
            //   this.$confirm('报工数量大于生产数量, 是否继续报工?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            //   })
            //     .then(() => {
            //       this.feedReport();
            //     })
            //     .catch(() => {
            //       this.loading.close();
            //     });
            // } else {
            //   this.feedReport();
            // }
          });
        }
      },

      feedReport() {
        batchSave(this.List)
          .then((res) => {
            this.loading.close();
            this.$message.success('投料成功');
            this.getList(this.idsList);
            this.executorIdList = [];
            this.checked = false;
            this.teamId = '';
            this.$emit('feedSuccess', 'success');
          })
          .catch((e) => {
            this.loading.close();
          });
      },

      toInteger(num) {
        const len = this.getDecimalLength(num);
        return {
          int: Math.round(num * Math.pow(10, len)),
          factor: Math.pow(10, len)
        };
      },

      add(a, b) {
        const { int: aInt, factor: aFactor } = this.toInteger(a);
        const { int: bInt, factor: bFactor } = this.toInteger(b);
        const maxFactor = Math.max(aFactor, bFactor);
        return (
          (aInt * (maxFactor / aFactor) + bInt * (maxFactor / bFactor)) /
          maxFactor
        );
      },

      getDecimalLength(num) {
        return (num.toString().split('.')[1] || '').length;
      },

      checkCache(type, index) {
        return new Promise((resolve) => {
          if (type == 1) {
            feedSaveCache(this.List).then((rr) => {
              this.$message.success('已经缓存');
            });
            resolve(false);
          } else if (type == 2) {
            resolve(true);
          }
        });
      },

      removeCacheFn(type) {
        this.$confirm('是否清空缓存', '缓存')
          .then(() => {
            let parma = {
              workOrderIds: type == 'all' ? this.idsList : [type],
              taskId: this.taskObj.id,
              type: 2
            };
            removeCache(parma).then((res) => {
              this.getList(this.idsList);
            });
          })
          .catch(() => {});
      }
    }
  };
</script>

<style scoped lang="scss">
  .top_fixed {
    width: 100%;
    height: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .feed_box {
    // margin-top: 6px;
    width: 100%;
    height: calc(100vh - 70px - 50px - 80px - 60px);
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .card_box {
    background: #fff;
    padding: 8px;
    border-radius: 2px;
  }

  .checkboxWrapper {
    padding: 8px 20px;
    border-bottom: 1px solid #ccc;
  }

  ::v-deep .el-select__tags {
    flex-wrap: nowrap;
    overflow: auto;
  }

  /* 输入框最大宽度*/
  ::v-deep .el-select__tags-text {
    max-width: 90px;
  }

  /* 底部滚动条的高度*/
  ::v-deep .el-select__tags::-webkit-scrollbar {
    height: 2px !important;
  }
</style>

<style lang="scss">
  .mt6 {
    margin-top: 6px;
  }

  .title_box {
    padding: 5px 0;

    .name {
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      color: #157a2c;
      padding-left: 5px;
      position: relative;

      &:before {
        position: absolute;
        content: '';
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 2px;
        height: 14px;
        background: #157a2c;
        margin: auto;
      }
    }
  }

  .material {
    margin-top: 6px;

    .content_table {
      width: 100%;
      border: 1px solid #e3e5e5;
      position: relative;

      .item {
        display: flex;
        border-bottom: 1px solid #e3e5e5;

        .lable {
          width: 72px;
          text-align: center;
          background-color: #f7f9fa;
          font-size: 12px;
          border-right: 1px solid #e3e5e5;
          flex-shrink: 0;
        }

        .lable80 {
          width: 80px !important;
          font-size: 12px;
        }

        .lable90 {
          width: 90px !important;
        }

        .lable100 {
          width: 100px !important;
        }

        .ww60 {
          width: 60px;
        }

        .content {
          width: 250px;
          min-height: 32px;
          font-size: 14px;
          line-height: 14px;
          font-style: normal;
          font-weight: 400;
          padding: 9px 4px;
          box-sizing: border-box;
          word-wrap: break-word;
          flex-grow: 1 !important;

          .unit {
            padding: 0 2px;
            font-size: 12px;
            color: #404446;
          }
        }

        .content_num {
          display: flex;
          align-items: center;
          padding: 2px;
          --input-background-color: #f0f8f2;
        }

        .pd2 {
          padding: 2px 4px;
        }

        &:last-child {
          border-bottom: none;
        }
      }

      .ww55 {
        width: 55%;
      }

      .ww50 {
        width: 50%;
      }

      .ww45 {
        width: 45%;
      }

      .ww40 {
        width: 40%;
      }

      .ww30 {
        width: 30%;
      }

      .ww33 {
        width: 33.33%;
      }

      .ww20 {
        width: 20%;
      }

      .del_box {
        position: absolute;
        right: 2px;
        top: 2px;
      }

      .sort_index {
        position: absolute;
        left: 2px;
        top: 2px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        border-radius: 50%;
        background: rgb(21, 122, 44);
      }
    }
  }
</style>