kd-aiot-frontend-mes/src/views/produce/components/outsourcing/outsourceList.vue

<template>
  <!-- 委外下一步 -->
  <div class="card">
    <div class="c_header_title">
      <div class="c_title">委外记录</div>
    </div>
    <div class="card_box">
      <el-descriptions>
        <el-descriptions-item label="委外名称">{{
          outObj.name
        }}</el-descriptions-item>
        <el-descriptions-item label="委外类型">{{
          outObj.type == 4 ? '带料委外' : '不带料委外'
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="直接入库">{{ outObj.isInWarehouse == 1 ? '是' : '否' }}</el-descriptions-item> -->
        <el-descriptions-item label="直接入库">{{ '是' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="物品清单" name="0">
        <div class="materialList">
          <div class="u-reset">
            <el-button
              type="primary"
              size="small"
              class="u-reset-button"
              @click="openPicking(2, 'goods')"
            >
              添加
            </el-button>
          </div>
          <!--  <div class="u-reset" style="display: flex;" v-if="clientEnvironmentId != 2">
						<el-checkbox color="#fff" v-model="checkedAll" :checked="seletedAll" @change="_seletedAll">全选
						</el-checkbox>
						<div class="gxList">勾选：<span style="color: #157A2C">{{ checkListLen || 0 }}个</span></div>
					</div>
						<div v-for="(item, index) in pickOutInList" :key="index">
							<div class="listBox rx-bs">

								<div class="listBox-sel">
									<el-checkbox  v-model="item.checked" color="#fff"
										@change="e => selectVal(e, item, index)"
										v-if='(item.rootCategoryLevelId != 11 || (item.rootCategoryLevelId == 11 && item.status != 1)) && clientEnvironmentId != 2'
										 >
										 </el-checkbox>

								</div>

								<div class="listBox-con">
									<div class="listBox-top rx-bc">
										<div> {{ item.name }}</div>
										<div class="code">
											{{ item.rootCategoryLevelId == 4 ? item.codeNumber : item.code }}
										</div>
									</div>

									<div class="listBox-bottom rx">
										<div v-for="(itm, index) in tableH(item.rootCategoryLevelId)" :key="index"
											class="items" v-if="!itm.formatter">
											<span>{{ itm.label }}</span>{{ item[itm.prop] }}
										</div>




										<div class="items"
											v-if='(item.rootCategoryLevelId == 1 && item.isConsumable == 1) && item.rootCategoryLevelId != 11 && item.rootCategoryLevelId != 4'>
											<span>可用库存:</span>{{ item.availableCountBase }} {{ item.unit }}
										</div>


										<div class="items"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 0)'>
											<span>刻码:</span>{{ item.extInfo.engrave }}
										</div>


										<div class="items"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 0)'>
											<span>物料代号:</span>{{ item.extInfo.materielCode }}
										</div>


										<div class="items"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 0)'>
											<span>客户代号:</span>{{ item.extInfo.clientCode }}
										</div>


										<div class="items" style="width: 15%;"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 0)'>
											<span>重量:</span>{{ item.extInfo.newWeight }} {{ item.extInfo.weightUnit }}
										</div>


										<div class="items" style="width: 15%;"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 1)'>
											<span>数量:</span>{{ item.feedQuantity }}
										</div>

										<div class="items" style="width: 15%;"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 1)'>
											<span>重量:</span>{{ item.weight || 0 }} {{ item.weightUnit }}
										</div>

										<div class="items"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 1)'>
											<span>规格:</span> {{ item.specification }}
										</div>

										<div class="items"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 1)'>
											<span>型号:</span> {{ item.modelType }}
										</div>

									</div>

								</div>
							</div>
						</div> -->

          <el-table
            ref="pickOutRef"
            class="table_content"
            :max-height="600"
            :data="pickOutInList"
            tooltip-effect="dark"
            style="width: 100%; margin-top: 10px"
            stripe
            border
            @selection-change="selectionPickOut"
          >
            <el-table-column align="center" type="selection" width="55">
            </el-table-column>
            <el-table-column label="序号" type="index" width="55">
              <template slot-scope="{ row, $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>

            <el-table-column
              label="编码"
              type="code"
              minWidth="110"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.categoryCode }}
              </template>
            </el-table-column>
            <el-table-column
              label="名称"
              type="name"
              minWidth="110"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.name }}
                <!-- ({{
							row.rootCategoryLevelId == 2
							? '在制品'
							: row.rootCategoryLevelId == 23
							? '半成品'
							: row.rootCategoryLevelId == 9
							? '产品'
							: item.rootCategoryLevelId == 28
							? '废品'
							: ''
						}}) -->
              </template>
            </el-table-column>

            <el-table-column
              label="型号"
              type="modelType"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.modelType }}
              </template>
            </el-table-column>

            <el-table-column
              label="规格"
              type="specification"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.specification }}
              </template>
            </el-table-column>

            <el-table-column label="牌号" type="brandNum" show-overflow-tooltip>
              <template slot-scope="{ row, $index }">
                {{ row.brandNum }}
              </template>
            </el-table-column>

            <el-table-column
              label="数量"
              type="feedQuantity"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                <el-input
                  v-model="row.feedQuantity"
                  v-if="row.isSelection == '1'"
                  @input="inputNum(row, $index)"
                ></el-input>
                <span v-else> {{ row.feedQuantity }}</span>
              </template>
              <!-- <template slot-scope="{ row, $index }" v-else>
                {{ row.feedQuantity }}
              </template> -->
            </el-table-column>

            <el-table-column
              label="重量"
              type="weightUnit"
              width="120"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.newWeight || 0 }} {{ row.weightUnit }}
              </template>
            </el-table-column>
            <el-table-column label="刻码" type="engrave" show-overflow-tooltip>
              <template slot-scope="{ row, $index }">
                {{ row.extInfo.engrave }}
              </template>
            </el-table-column>

            <el-table-column
              label="物料代号"
              type="materielCode"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.extInfo.materielCode }}
              </template>
            </el-table-column>
            <el-table-column
              label="客户代号"
              type="clientCode"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, $index }">
                {{ row.extInfo.clientCode }}
              </template>
            </el-table-column>

            <el-table-column label="操作" show-overflow-tooltip fixed="right">
              <template slot-scope="{ row, $index }">
                <el-button type="text" @click="deleteData(row, $index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="带料清单" name="1">
        <div class="materialList">
          <div class="u-reset">
            <el-button
              type="primary"
              size="small"
              class="u-reset-button"
              @click="openPicking(2, 'belting')"
            >
              添加
            </el-button>
          </div>

          <div v-for="(item, index) in bomMaterialList" :key="index">
            <label class="listBox rx-bs">
              <div class="listBox-con">
                <div class="listBox-bottom rx">
                  <div class="items"> <span>序号</span>{{ index + 1 }} </div>
                  <div class="items" :title="item.name">
                    <span>名称</span>{{ item.name }}
                  </div>

                  <div class="items" :title="item.code">
                    <span>编码</span>{{ item.code }}
                  </div>

                  <div
                    v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                    :key="index"
                    class="items"
                    v-if="!itm.formatter"
                  >
                    <span>{{ itm.label }}</span
                    >{{ item[itm.prop] }}
                  </div>

                  <div
                    class="items"
                    v-if="item.isDemandQuantity && clientEnvironmentId != 2"
                    style="width: 15%"
                  >
                    <span>数量</span
                    >{{
                      checkListLen == 0
                        ? item.demandQuantity
                        : item.count * (checkListLen || 1)
                    }}
                    {{ item.unit }}
                  </div>
                  <div
                    class="items content_num"
                    v-if="!item.isDemandQuantity && clientEnvironmentId != 2"
                    style="width: 15%"
                  >
                    <span>数量</span>
                    <input
                      style="width: 90% !important"
                      v-model="item.demandQuantity"
                    />
                    {{ item.measuringUnit }}
                  </div>

                  <div
                    class="items"
                    v-if="item.isDemandQuantity && clientEnvironmentId == 2"
                    style="width: 15%"
                  >
                    <span>数量</span
                    >{{ item.count * (outObj.formedNumLast || 1) }}
                  </div>
                  <div
                    class="items content_num"
                    v-if="!item.isDemandQuantity && clientEnvironmentId == 2"
                    style="width: 15%"
                  >
                    <span>数量</span>
                    <input
                      style="width: 90% !important"
                      v-model="item.demandQuantity"
                    />
                    {{ item.measuringUnit }}
                  </div>

                  <div>
                    <el-button type="text" @click="convertList(item, index)"
                      >转物品清单</el-button
                    >

                    <el-button
                      type="text"
                      style="color: red"
                      @click="deleteBomMaterial(item, index)"
                      >删除</el-button
                    >
                  </div>
                </div>
              </div>
            </label>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="产出清单" name="2">
        <div class="materialList">
          <div class="u-reset">
            <!-- <el-button
              type="primary"
              size="small"
              class="u-reset-button"
              @click="openPicking(3, 'output')"
            >
              添加
            </el-button> -->
          </div>
          <div v-for="(item, index) in standardOutputList" :key="index">
            <label class="listBox rx-bs">
              <div class="listBox-con">
                <div class="listBox-bottom rx">
                  <div class="items" style="width: 15%">
                    <span>序号</span>{{ index + 1 }}
                  </div>
                  <div class="items"> <span>名称</span>{{ item.name }} </div>

                  <div class="items"> <span>编码</span>{{ item.code }} </div>

                  <div
                    v-for="(itm, index) in tableH(item.rootCategoryLevelId)"
                    :key="index"
                    class="items"
                    v-if="!itm.formatter"
                  >
                    <span>{{ itm.label }}</span
                    >{{ item[itm.prop] }}
                  </div>

                  <div class="items">
                    <span>数量</span>
                    <input
                      style="width: 30% !important"
                      v-model="item.demandQuantity"
                    />
                  </div>

                  <div
                    class="items"
                    v-if="item.isSelection && item.isSelection == '1'"
                  >
                    <span>产出工序</span>
                    <el-select v-model="item.taskId" placeholder="请选择">
                      <el-option
                        v-for="item in outObj.taskDataList"
                        :key="item.taskId"
                        :label="item.taskTypeName"
                        :value="item.taskId"
                      >
                      </el-option>
                    </el-select>
                  </div>

                  <div>
                    <el-button
                      type="text"
                      @click="deleteOutput(index)"
                      style="color: red"
                      >删除</el-button
                    >
                  </div>
                </div>
              </div>
            </label>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="operate_box">
      <el-button
        size="small"
        class="u-reset-button"
        @click="close"
        style="margin-left: 10px"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        size="small"
        class="u-reset-button"
        @click="handOK(0)"
      >
        确认
      </el-button>

      <el-button
        type="primary"
        size="small"
        class="u-reset-button"
        @click="handOK(1)"
      >
        提交
      </el-button>
    </div>

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

<script>
  import {
    // 	checkOutsourceMaterial,
    applyoutsourceSave
    // 	getWarehouseList
  } from '@/api/produce/index.js';

  import { tableHeader } from '@/utils/dict/common.js';
  // import {
  // 	EventBus
  // } from '@/utils/eventBus.js'
  import pickingList from './pickingList.vue';
  export default {
    components: { pickingList },
    data() {
      return {
        checkListLen: 0,
        checkedAll: true,
        checkList: [],
        mode: 'center',
        show: false,
        topHight: 20 || 20,
        activeName: '0',
        outObj: {
          name: '111',
          type: 4,
          isInWarehouse: 1
        },

        tabList: [
          {
            name: '物品清单'
          },
          {
            name: '带料清单'
          },
          {
            name: '产出清单'
          }
        ],

        actTab: '物品清单',
        datapickOutInList: [],
        bomMaterialList: [],
        pickOutInList: [],
        materialList: [],
        standardOutputList: [],

        isFirstTask: null,
        isLoading: null,

        // clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo")
        // 	.clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境

        seletedAll: false, //全选状态
        checkListLen: 0,

        warehouseList: [],
        pickOutInListSelect: [],
        selectionIds: [],
        newStepsList: []
      };
    },

    created() {
      // EventBus.$on('outEvent', this.handleEvent);
      // this.outsourceMaterialFn()
    },

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

    props: {
      outsourceFormVal: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      outsourceFormVal: {
        handler(val) {
          console.log(val, 'outsourceFormVal');
          this.outsourceMaterialFn(val);
          this.outObj = val;
        },
        deep: true,
        immediate: true
      }
    },

    methods: {
      // open(obj) {
      // 	// this.outObj = obj;
      // 	this.actTab = '物品清单';
      // 	// this.outsourceMaterialFn()
      // 	// this.getWarehouseFn()
      // },
      allSelection(e, item, type) {
        if (e == 2) {
          if (type == 'goods') {
            item.map((it) => {
              it.isSelection = '1';
              it.categoryCode = it.code;
              it.feedQuantity = 1;
              it.categoryId = it.id;
              it.newWeight = it.weight;
              this.pickOutInList.push(this.deepCopy(it));
            });
            this.selectionData();
          } else {
            if (item.length) {
              item.map((v) => {
                this.bomMaterialList.push(v);
              });
            }
          }
        } else if (e == 3) {
          if (item.length) {
            item.map((it) => {
              it.isSelection = '1';
              it.categoryCode = it.code;
              it.feedQuantity = 1;
              it.categoryId = it.id;
              it.newWeight = it.weight;
              it.rootCategoryLevelId = it.categoryLevelPathIdParent;
              it.taskId = '';
              it.taskName = '';
              this.standardOutputList.push(this.deepCopy(it));
            });
            // this.standardOutputList = item;
          }
        }
      },

      // selectionData(ids) {
      //   this.$nextTick(() => {
      //     this.tableData.forEach((row) => {
      //       if (ids.includes(row.id)) {
      //         this.$refs.table.toggleRowSelection(row, true);
      //       }
      //     });
      //   });
      // },

      deepCopy(obj, hash = new WeakMap()) {
        if (obj === null) return null;
        if (obj instanceof Date) return new Date(obj);
        if (obj instanceof RegExp) return new RegExp(obj);
        if (typeof obj !== 'object' && typeof obj !== 'function') return obj;
        if (hash.has(obj)) return hash.get(obj);

        const result = Array.isArray(obj) ? [] : {};
        hash.set(obj, result);

        return Object.keys(obj).reduce((acc, key) => {
          acc[key] = this.deepCopy(obj[key], hash);
          return acc;
        }, result);
      },

      openPicking(id, type) {
        this.$refs.pickingListRef.open(id, type);
      },

      outsourceMaterialFn(res) {
        let _arr = [];
        _arr = [...res.pickOutInList, ...res.materialList];

        this.pickOutInList = _arr.reduce((acc, item) => {
          const existingItem = acc.find((existing) => existing.id === item.id);
          if (!existingItem) {
            item.isSelection = '2';
            acc.push(item);
          }
          return acc;
        }, []);

        this.bomMaterialList = res.bomMaterialList.map((m) => {
          return {
            ...m,
            isDemandQuantity: true
          };
        });

        this.pickOutInList.map((v) => {
          v.checked = true;
        });

        this.checkListLen = this.pickOutInList.length;

        this.standardOutputList = res.standardOutputList;

        // let param = {
        // 	taskId: this.outObj.taskId,
        // 	taskIds: this.outObj.taskIds,
        // 	workOrderId: this.outObj.workOrderId

        // }
        // checkOutsourceMaterial(param).then(res => {

        // 	let _arr = []
        // 	_arr = [...res.pickOutInList, ...res.materialList]
        // 	this.pickOutInList = _arr.reduce((acc, item) => {
        // 		const existingItem = acc.find(existing => existing.id === item.id);
        // 		if (!existingItem) {
        // 			acc.push(item);
        // 		}
        // 		return acc;
        // 	}, []);

        // 	this.bomMaterialList = res.bomMaterialList.map((m) => {
        // 		return {
        // 			...m,
        // 			isDemandQuantity: true

        // 		}
        // 	})
        // 	this.standardOutputList = res.standardOutputList
        // 	this.$forceUpdate()
        // })
        this.$nextTick(() => {
          this.$refs.pickOutRef.toggleAllSelection();
        });
      },

      inputNum(item, index) {
        if (item.feedQuantity) {
          const totalWeight = Number(item.feedQuantity) * Number(item.weight);
          this.$set(this.pickOutInList[index], 'newWeight', totalWeight);
          this.$forceUpdate();
        } else {
          this.$set(this.pickOutInList[index], 'newWeight', item.weight);
          this.$forceUpdate();
        }
      },

      // 仓库
      getWarehouseFn() {
        getWarehouseList().then((res) => {
          this.warehouseList = res;
        });
      },

      deleteData(item, index) {
        this.pickOutInList.splice(index, 1);
      },

      handTab(item) {
        this.actTab = item.name;
      },
      //关闭弹窗
      close() {
        this.$emit('closeForm');
      },

      handleEvent({ message }) {
        if (message.pid == 3) {
          this.standardOutputList = message.memoList;
        } else {
          if (message.pid == 2) {
            this.bomMaterialList = message.memoList;
          }
        }
      },

      tableH(type) {
        return tableHeader(type);
      },
      //勾选
      selectVal(e, val, index) {
        this.$forceUpdate();
        this.pickOutInList[index] = val;
        this.$set(this, 'pickOutInList', this.pickOutInList);

        this.checkListLen = this.pickOutInList.filter(
          (f) => f.checked == true
        ).length;
      },

      _seletedAll() {
        console.log(this.seletedAll, this.pickOutInList, 'this.seletedAll');
        // this.seletedAll true 是全选

        if (!this.seletedAll) {
          // 非全选
          this.seletedAll = true;
          this.checkListLen = 0;

          this.pickOutInList.map((item) => {
            item.checked = false;
          });

          this.$set(this, 'pickOutInList', this.pickOutInList);
        } else {
          this.seletedAll = false;

          this.pickOutInList.map((item) => {
            item.checked = true;
          });
          this.$set(this, 'pickOutInList', this.pickOutInList);
        }
        this.checkListLen = this.pickOutInList.filter(
          (f) => f.checked == true
        ).length;
      },
      selectionPickOut(val) {
        this.pickOutInListSelect = val;
      },

      deleteOutput(index) {
        this.standardOutputList.splice(index, 1);
      },

      deleteBomMaterial(item, index) {
        this.bomMaterialList.splice(index, 1);
      },

      convertList(item, index) {
        if (item.demandQuantity) {
          item.categoryCode = item.code;
          item.feedQuantity = item.demandQuantity;
          item.isSelection = '1';
          item.categoryId = item.id;
          item.newWeight = item.weight;
          this.pickOutInList.push(this.deepCopy(item));
          this.selectionData();
          this.bomMaterialList.splice(index, 1);
          this.$forceUpdate();
        } else {
          return this.$message({
            message: '请输入转换数量',
            type: 'warning'
          });
        }
      },

      selectionData() {
        this.$nextTick(() => {
          this.$refs.pickOutRef.toggleAllSelection();
        });
      },

      scrolltolower() {},

      addPicking(id) {
        const storageKey = Date.now() + '';
        let arr = null;
        if (id == 3) {
          arr = [
            {
              standardOutputList: this.standardOutputList
            }
          ];
        } else {
          arr = [
            {
              bomMaterialList: this.bomMaterialList
            }
          ];
        }

        // uni.setStorageSync(storageKey, arr);
        // uni.navigateTo({
        // 	url: `/pages/pda/workOrder/search/index?id=${id}&storageKey=${storageKey}&isType=zdy&taskId=${this.outObj.taskId}&classIds=[1,23,9]`
        // })
      },

      handOK(isRelease) {
        // isRelease? 0 提交 2提交并发布

        if (this.checkListLen > 0 && !this.outObj.warehouseId) {
          return this.$message({
            message: '请选择仓库',
            type: 'warning'
          });
        }

        // 环境判断
        let _pickOutInList = [];

        if (this.clientEnvironmentId == 2) {
          _pickOutInList = this.pickOutInList;
        } else {
          // _pickOutInList = this.pickOutInList.filter(f => f.checked == true)
          _pickOutInList = this.pickOutInListSelect;
        }

        for (let i = 0; i < _pickOutInList.length; i++) {
          if (
            !_pickOutInList[i].feedQuantity &&
            _pickOutInList[i].isSelection == '1'
          ) {
            this.$message.warning('物品数量不能为空');
            return;
          }
        }

        let param = {
          ...this.outObj,
          isRelease: isRelease,
          bomMaterialList: this.bomMaterialList,
          pickOutInList: _pickOutInList,
          materialList: this.materialList,
          standardOutputList: this.standardOutputList
        };

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

        applyoutsourceSave(param)
          .then((res) => {
            this.$emit('outScucc');
            this.isLoading.close();
            return this.$message({
              message: '提交成功',
              type: 'scuccess'
            });
            this.checkListLen = 0;
          })
          .catch(() => {
            this.isLoading.close();
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .c_header_title {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    height: 58px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color-lighter);
  }

  .operate_box {
    display: flex;
    flex-direction: row-reverse;
    padding: 15px;
    box-shadow: 0px -2px 15px 0px rgba(0, 0, 0, 0.1);
  }

  .c_title {
    color: #157a2c;
    font-size: 16px;
    font-weight: bold;
  }

  .materialList {
    height: 50vh;
    overflow: auto;
  }

  .card {
    width: 100%;
    padding: 0 20px;
  }

  .u-reset {
    width: 100%;
    padding: 5px;
    text-align: right;
  }

  .listBox-con {
    width: 100%;
  }
  .gxList {
    margin-left: 10px;
  }

  .listBox-sel {
    margin: 0 10px;
  }

  .listBox-top {
    display: flex;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
  }

  .listBox-bottom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .listBox {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    margin-bottom: 20px;
  }

  .items {
    font-size: 12px;
    width: 23%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    // border: 1px solid #ddd;
    // border-bottom: 1px solid #ddd;
    // border-right: 0;
    span {
      display: block;
      padding: 10px;
      margin-right: 5px;
      color: #157a2c;
      background-color: #f7f9fa;
    }
  }

  ::v-deep .el-input--medium .el-input__inner {
    height: 26px;
    line-height: 26px;
  }
</style>