kd-aiot-frontend-mes/src/views/batchRecord/components/workOrderReport.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    resizable
    maxable
    width="80%"
  >
    <header-title title="基本信息"></header-title>
    <el-form
      ref="formRef"
      :model="addForm"
      :rules="rules"
      label-width="120px"
      v-loading="loading"
      :disabled="type == 'detail'"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="记录规则名称" required>
            <el-input
              v-model="addForm.ruleName"
              placeholder="自动带出"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录规则分类" required>
            <DictSelection
              dictName="记录规则类型"
              clearable
              v-model="addForm.recordRulesClassify"
              disabled
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查开始时间" required prop="checkStartTime">
            <el-date-picker
              v-model="addForm.checkStartTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width: 100%"
              :picker-options="{
                disabledDate: (time) => time.getTime() > Date.now()
              }"
              @change="computedDuration"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查结束时间" required prop="checkFinishTime">
            <el-date-picker
              v-model="addForm.checkFinishTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width: 100%"
              :picker-options="{
                disabledDate: (time) => time.getTime() > Date.now()
              }"
              @change="computedDuration"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!-- <el-form-item label="执行人" required prop="teamId">
            <el-select
              v-model="addForm.teamId"
              placeholder="请选择班组"
              filterable
              style="width: 120px"
              @change="checkTeamList(addForm.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="addForm.executeUsersIds"
              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>
          </el-form-item> -->

          <el-form-item label="部门">
            <deptSelect
              v-model="addForm.groupId"
              @changeGroup="searchDeptNodeClick"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="报工人" prop="executeUsersIds">
            <el-select
              v-model="addForm.executeUsersIds"
              size="small"
              style="width: 100%"
              multiple
              filterable
              @change="executeIdListChange"
            >
              <el-option
                v-for="item in executorList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工时" required prop="duration">
            <el-input
              placeholder="请输入"
              v-model="addForm.duration"
              type="number"
              min="0"
              step="0.1"
              @change="durationChagne"
            >
              <template slot="append">
                <div style="width: 40px; box-sizing: border-box">小时</div>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结论" required prop="conclusion">
            <el-radio-group v-model="addForm.conclusion">
              <el-radio :label="1">合格</el-radio>
              <el-radio :label="2">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <header-title title="检查项目" :style="`margin-top: 20px`"></header-title>

      <template v-if="addForm.recordTemplateStyle == '4'">
        <el-tabs v-model="statisticsType" type="card">
          <el-tab-pane
            v-for="i in statisticsTypeList"
            :label="i.label"
            :name="i.value"
            :key="i.value"
          >
          </el-tab-pane>
        </el-tabs>
        <statistics
          ref="statisticsRef"
          :details.sync="addForm.details"
          :statisticsType="statisticsType"
          :produceTaskId="addForm.produceTaskId"
          :workOrderId="addForm.workOrderId"
          :routingId="addForm.produceRoutingId"
          :ruleId="addForm.ruleId"
        ></statistics>
      </template>

      <ele-pro-table
        v-if="addForm.recordTemplateStyle != '4'"
        v-loading="loading"
        ref="table"
        row-key="id"
        :columns="detailsColumns"
        :datasource="addForm.details"
        cacheKey="mes-releaseRulesDialong-2510281408"
        :needPage="false"
      >
        <template v-slot:toolkit>
          <el-button
            v-if="addForm.recordTemplateStyle != '3'"
            type="primary"
            @click="batchCheck"
            >批量检查</el-button
          >
          <el-button
            v-if="addForm.recordTemplateStyle != '3'"
            type="primary"
            @click="batchQualified"
            >批量合格</el-button
          >
        </template>
        <template v-slot:paramValue="{ row }">
          <div v-if="addForm.recordTemplateStyle == '3'">
            {{ row.productName }}
          </div>
          <div v-else>
            {{ row.paramValue }}
            <span v-if="row.paramValue">{{ row.paramValue }}</span>
            <!-- 兼容一下 模板改造功能 -->
            <span v-else>
              {{ row.productName }}
            </span>
          </div>
        </template>
        <template v-slot:toolNames="{ row }">
          <el-link :underline="false" style="cursor: pointer">
            <div class="ele-cell">
              <div @click="handleAdd(row)">
                {{ row.toolNames ? row.toolNames : '请选择' }}
              </div>
              <i
                v-if="!row.toolNames"
                class="el-icon-arrow-down"
                @click="handleAdd(row)"
              ></i>
              <i v-else class="el-icon-close" @click="clearTool(row)"></i>
            </div>
          </el-link>
        </template>
        <template v-slot:checkUsersIds="{ row }">
          <div>
            <el-select
              v-model="row.checkUsersIds"
              placeholder="请选择检查人"
              filterable
              multiple
              @change="checkUsersIdsChange(row)"
            >
              <el-option
                v-for="item in addForm.executeUsers"
                :label="item.userName"
                :value="item.userId"
                :key="item.userId"
              >
              </el-option>
            </el-select>
          </div>
        </template>
        <template v-slot:checkStatus="{ row }">
          <div>
            <el-radio-group v-model="row.checkStatus">
              <el-radio :label="1">已检查</el-radio>
              <el-radio :label="0">未检查</el-radio>
            </el-radio-group>
          </div>
        </template>
        <template v-slot:errorMsg="{ row }">
          <div>
            <el-input
              type="text"
              :rows="1"
              placeholder="请输入"
              v-model="row.errorMsg"
            >
              <template v-if="row.unitName" slot="append">
                <div>{{ row.unitName }}</div>
              </template>
            </el-input>
          </div></template
        >
        <template v-slot:checkResult="{ row }">
          <div>
            <el-radio-group v-model="row.checkResult">
              <el-radio :label="1">合格</el-radio>
              <el-radio :label="0">不合格</el-radio>
            </el-radio-group>
          </div>
        </template>
      </ele-pro-table>
    </el-form>

    <toolModal ref="toolModalRef" @chooseModal="chooseModal" />

    <template v-slot:footer>
      <el-button
        v-if="type == 'add'"
        type="primary"
        @click="submit"
        :loading="butLoading"
        >提 交</el-button
      >
      <el-button @click="handleClose">取 消</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getById } from '@/api/producetaskrecordrulesrecord/index';
  import { getTeam } from '@/api/produce/job.js';
  import toolModal from '@/views/batchRecord/components/toolModal.vue';
  import { producetaskrulerecordSaveOrUpdateAndSubmit } from '@/api/recordRules/index.js';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import { getUserPage } from '@/api/system/organization';

  export default {
    mixins: [dictMixins],
    components: {
      toolModal,
      deptSelect
    },
    watch: {
      'addForm.details': {
        handler(details) {
          // 排除 物料添加 和 生产统计 模板
          if (
            this.addForm.recordTemplateStyle == '4' ||
            this.addForm.recordTemplateStyle == '3'
          )
            return;
          const any = details.some((i) => i.checkResult === null);

          if (any || details.length === 0) return;

          const every = details.every((i) => i.checkResult == 1);
          this.addForm.conclusion = every ? 1 : 2;
          console.log('this.addForm.conclusion', this.addForm.conclusion);
        },
        deep: true
      }
    },
    data() {
      const formBaseData = {
        id: null,
        workshopArea: '',
        workshopAreaId: null,
        checkFinishTime: '',
        checkStartTime: '',
        checkValidity: null,
        checkValidityUnit: '',
        conclusion: null,
        isTempRecord: this.isTempRecord,
        details: [],
        deviceId: 0,
        deviceName: '',
        batchNo: '',
        executeMethod: 0,
        formingNum: 0,
        itemType: 0,
        produceRoutingId: 0,
        produceRoutingName: '',
        produceTaskConfigId: 0,
        produceTaskId: 0,
        produceTaskName: '',
        productCode: '',
        productModel: '',
        productName: '',
        recordRulesClassify: null,
        recordTemplateStyle: null,
        ruleId: 0,
        ruleName: '',
        reportWorkType: 0,
        specification: '',
        workOrderCode: '',
        workOrderId: 0,
        itemTaskName: '',
        brandNo: '',
        duration: null,
        // 执行人
        executeUsersIds: [],
        executeUsers: [],
        // 班组id
        teamId: '',
        groupId: null,
        // 物料字段name
        pickDetails: [],
        // 本次产出明细
        outputDetails: [],
        recordRulesExecuteMethodId: null,
        recordRulesExecuteMethodName: '',
        // 	产出类型 1-原材料，2-在制品，3.BOM标准产出
        outputType: 1
      };

      return {
        visible: false,
        type: 'add',
        title: '报工',
        formBaseData,
        addForm: JSON.parse(JSON.stringify(formBaseData)),
        rules: {
          checkStartTime: [
            { required: true, message: '请选择检查开始时间', trigger: 'blur' },
            {
              required: true,
              message: '请选择检查开始时间',
              trigger: 'change'
            },
            {
              validator: (rule, value, callback) => {
                if (!value) return callback();
                const start = new Date(value).getTime();
                const now = Date.now();
                if (start > now) {
                  callback(new Error('开始时间不能超过当前时间'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ],
          checkFinishTime: [
            { required: true, message: '请选择检查完成时间', trigger: 'blur' },
            {
              required: true,
              message: '请选择检查完成时间',
              trigger: 'change'
            },
            {
              validator: (rule, value, callback) => {
                if (!value) return callback();
                const start = new Date(this.addForm.checkStartTime).getTime();
                const finish = new Date(value).getTime();
                const now = Date.now();
                if (finish <= start) {
                  callback(new Error('结束时间必须大于开始时间'));
                } else if (finish > now) {
                  callback(new Error('结束时间不能超过当前时间'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ],
          conclusion: [
            { required: true, message: '请选择结论', trigger: 'blur' },
            { required: true, message: '请选择结论', trigger: 'change' }
          ],
          duration: [
            { required: true, message: '请输入工时', trigger: 'blur' },
            { required: true, message: '请输入工时', trigger: 'change' },
            {
              validator: (rule, value, callback) => {
                if (value === '' || value === null) {
                  callback();
                } else if (Number(value) <= 0) {
                  callback(new Error('工时必须大于0'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ],
          teamId: [
            { required: true, message: '请选择班组', trigger: 'blur' },
            { required: true, message: '请选择班组', trigger: 'change' }
          ]
        },
        loading: false,
        currentRow: null,
        butLoading: false,
        checked: false,
        teamUserList: [],
        teamList: [],
        teamAllList: [],
        workshopAreaList: [],
        // 1-成品统计，2-物料统计，3-工序统计"
        statisticsType: '1',
        statisticsTypeList: [
          { label: '成品统计', value: '1' },
          { label: '物料统计', value: '2' },
          { label: '工序统计', value: '3' }
        ],
        executorList: []
      };
    },
    computed: {
      // title() {
      //   if (this.addForm.recordRulesClassify) {
      //     const dictValue = this.getDictValue(
      //       '记录规则类型',
      //       this.addForm.recordRulesClassify
      //     );
      //     return dictValue + '记录表';
      //   }
      //   return '记录表';
      // },
      activeTeamUserList() {
        return this.teamUserList.filter((user) =>
          this.addForm.executeUsersIds.includes(user.id)
        );
      },
      // 规则详情表头
      detailsColumns() {
        let list = [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            label: '检查内容',
            prop: 'paramValue',
            minWidth: 120,
            slot: 'paramValue'
          }
        ];

        if (this.addForm.recordTemplateStyle != '3') {
          list = [
            ...list,
            {
              label: '检查工具',
              prop: 'toolNames',
              minWidth: 120,
              slot: 'toolNames'
            },
            {
              label: '检查人',
              prop: 'checkUsersIds',
              minWidth: 120,
              slot: 'checkUsersIds'
            },
            {
              label: '检查情况',
              prop: 'checkStatus',
              minWidth: 120,
              slot: 'checkStatus'
            },
            {
              label: '描述',
              prop: 'errorMsg',
              minWidth: 120,
              slot: 'errorMsg'
            },
            {
              label: '检查结果',
              prop: 'checkResult',
              minWidth: 120,
              slot: 'checkResult'
            }
          ];
        } else {
          list.push({
            label: '描述',
            prop: 'errorMsg',
            minWidth: 120,
            slot: 'errorMsg'
          });
        }
        return list;
      }
    },
    created() {
      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.getUserList();
    },
    methods: {
      // 外部调用，打开弹窗
      open(type = 'add', data) {
        this.type = type;
        console.log('data', data);
        if (type == 'add') {
          this.title = '报工';
        } else {
          this.title = '详情';
        }
        this.getOrderDetials(data.id);
        this.visible = true;
      },
      // 获取工单详情
      async getOrderDetials(id) {
        this.loading = true;
        try {
          const data = await getById(id);
          console.log('data', data);
          data.details = data.details.map((i) => {
            i.toolNames = i.tools.map((j) => j.toolName).join(',');
            i.checkUsersIds = i.checkUsers.map((j) => j.userId);
            if (i.checkUsersIds.length == 0 && data.executeUsers.length > 0) {
              // 默认执行人作为检查人
              i.checkUsersIds = data.executeUsers.map((j) => j.userId);
              i.checkUsers = data.executeUsers.map((j) => {
                return {
                  teamId: j.teamId,
                  teamName: j.teamName,
                  userId: j.userId,
                  userName: j.userName
                };
              });
            }
            return i;
          });
          this.$util.assignObject(this.addForm, data);
          console.log('this.addForm', this.addForm);

          // 处理数据
          this.addForm.executeUsersIds = this.addForm.executeUsers.map(
            (i) => i.userId
          );

          this.addForm.teamId =
            this.addForm.executeUsers.length > 0
              ? this.addForm.executeUsers[0].teamId
              : '';

          if (this.addForm.executeUsers.length > 0) {
            this.addForm.groupId = this.addForm.executeUsers[0]?.groupId || '';
            this.searchDeptNodeClick(this.addForm.groupId);
          }

          if (!this.addForm.teamId && this.teamList.length > 0) {
            this.addForm.teamId = this.teamList[0].id;
          }

          // 工时毫秒转小时
          this.addForm.duration = (
            this.addForm.duration /
            (1000 * 60 * 60)
          ).toFixed(2);

          this.addForm.recordRulesClassify += '';

          // 加载班组人员列表
          if (this.addForm.teamId) {
            const index = this.teamList.findIndex(
              (item) => item.id == this.addForm.teamId
            );
            this.teamUserList = this.teamAllList[index];
            console.log('this.teamUserList', this.teamUserList);
          }

          this.$nextTick(() => {
            this.$refs.formRef.clearValidate();

            this.loading = false;
          });
        } catch (error) {
          this.loading = false;
        }
      },
      // 关闭时清理表单
      handleClose() {
        this.addForm = JSON.parse(JSON.stringify(this.formBaseData));
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
          this.visible = false;
        });
      },
      // 提交
      submit() {
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            console.log('this.addForm', this.addForm);
            // this.handleClose();
            if (this.addForm.executeUsersIds.length == 0) {
              this.$message.warning('请选择执行人！');
              return;
            }

            // 报工需要验证 缓存不验证 排除 recordTemplateStyle ==3 物料添加 == 4生产统计 模板
            if (
              this.addForm.recordTemplateStyle != '3' &&
              this.addForm.recordTemplateStyle != '4'
            ) {
              // 验证检查项目
              const detailRequired = this.addForm.details.some((i) => {
                return (
                  i.checkResult == null ||
                  !i.checkStatus ||
                  i.checkUsers?.length == 0
                );
              });

              if (detailRequired) {
                return this.$message.warning(
                  '请先完善 检查人、检查情况、检查结果 内容！'
                );
              }
            }

            const body = JSON.parse(JSON.stringify(this.addForm));

            // 工时小时转毫秒
            body.duration = Number(body.duration);
            body.duration = body.duration * 60 * 60 * 1000;

            this.butLoading = true;

            try {
              await producetaskrulerecordSaveOrUpdateAndSubmit(body);
              this.$message.success('报工成功！');
              this.butLoading = false;
              this.$emit('refresh');
              this.handleClose();
            } catch (error) {
              this.butLoading = false;
            }
          }
        });
      },
      // 选择工具
      handleAdd(row) {
        this.currentRow = row;
        this.$refs.toolModalRef.open(row.tools.map((i) => i.toolCode));
      },
      chooseModal(data) {
        console.log('data', data);
        this.currentRow.tools = data.map((i) => {
          return {
            toolCode: i.code,
            toolName: i.name
          };
        });
        this.currentRow.toolNames = this.currentRow.tools
          .map((i) => i.toolName)
          .join(',');
      },
      clearTool(row) {
        row.tools = [];
        row.toolNames = '';
      },
      checkTeamList(id) {
        const index = this.teamList.findIndex((item) => item.id == id);
        this.teamUserList = this.teamAllList[index];
        console.log('this.teamUserList', this.teamUserList);
      },
      async getTeamList(id) {
        if (!id) return;
        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);
        });
      },
      changeId() {
        if (this.addForm.executeUsersIds.length == this.teamUserList.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }

        const deleteUserIds = this.addForm.executeUsers
          .map((i) => i.userId)
          .filter((id) => !this.addForm.executeUsersIds.includes(id));

        const addUserIds = this.addForm.executeUsersIds.filter(
          (id) => !this.addForm.executeUsers.map((i) => i.userId).includes(id)
        );

        // 删除 用户
        if (deleteUserIds.length > 0) {
          this.addForm.executeUsers = this.addForm.executeUsers.filter(
            (item) => !deleteUserIds.includes(item.userId)
          );
        }

        // 添加 用户
        addUserIds.forEach((id) => {
          const user = this.teamUserList.find((item) => item.id === id);
          if (user) {
            this.addForm.executeUsers.push({
              teamId: this.addForm.teamId,
              teamName: this.teamList.find(
                (team) => team.id == this.addForm.teamId
              )?.name,
              userId: user.id,
              userName: user.name
            });
          }
        });

        console.log('this.addForm.executeUsers', this.addForm.executeUsers);

        this.computedDuration();

        // 同步详情执行人
        this.addForm.details.forEach((detail) => {
          detail.checkUsersIds = this.addForm.executeUsersIds;
          detail.checkUsers = this.addForm.executeUsers;
        });
      },
      checkChange() {
        this.addForm.executeUsersIds = [];
        if (this.checked) {
          this.addForm.executeUsersIds = this.teamUserList.map(
            (item) => item.id
          );
        } else {
          this.addForm.executeUsersIds = [];
        }
      },
      // 计算工时
      computedDuration() {
        if (
          this.addForm.checkStartTime &&
          this.addForm.checkFinishTime &&
          this.addForm.executeUsersIds.length > 0
        ) {
          const start = new Date(this.addForm.checkStartTime);
          const finish = new Date(this.addForm.checkFinishTime);
          const diff = finish - start; // 毫秒差值
          const hours = diff / (1000 * 60 * 60); // 转换为小时
          const totalDuration = hours * this.addForm.executeUsersIds.length;
          this.addForm.duration = totalDuration.toFixed(1);
        }
      },
      durationChagne() {
        // 保留小数后一位
        if (
          this.addForm.duration &&
          this.addForm.duration.toString().includes('.')
        ) {
          this.addForm.duration = Number(this.addForm.duration).toFixed(1);
        }
      },
      checkUsersIdsChange(row) {
        // 同步 checkUsers
        row.checkUsers = row.checkUsersIds.map((i) => {
          const user = this.addForm.executeUsers.find(
            (item) => item.userId === i
          );
          return user;
        });

        console.log('row', row);
      },
      // 查询车间区域
      async getWorkshopArea() {
        const data = await getFactoryarea({
          pageNum: 1,
          size: 999,
          type: 3
        });
        console.log('list', data.list);
        this.workshopAreaList = data.list;
      },
      workshopAreaIdChange(e) {
        const area = this.workshopAreaList.find((i) => i.id === e);
        if (area) {
          this.addForm.workshopArea = area.name;
        } else {
          this.addForm.workshopArea = '';
        }
      },
      // 批量检查
      batchCheck() {
        this.addForm.details = this.addForm.details.map((i) => {
          i.checkStatus = 1;
          return i;
        });
      },
      // 批量合格
      batchQualified() {
        this.addForm.details = this.addForm.details.map((i) => {
          i.checkResult = 1;
          return i;
        });
      },
      // 获取审核人列表、巡点检人员
      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取部门人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          if (params) {
            this.executorList = res.list;
          } else {
            this.uerList = res.list;
          }
        } catch (error) {}
      },
      //选择部门(搜索)
      async searchDeptNodeClick(groupId, data) {
        if (groupId) {
          // 根据部门获取人员
          const params = { groupId: groupId };
          await this.getUserList(params);
        } else {
          this.addForm.groupId = null;
        }
      },
      // 负责人变更 同步执行人列表
      executeIdListChange() {
        this.addForm.executeUsers = this.addForm.executeUsersIds.map(
          (userId) => {
            const user = this.executorList.find((u) => u.id === userId);
            return {
              userId: user.id,
              userName: user.name,
              groupId: user.groupId,
              groupName: user.groupName
            };
          }
        );
        // 同步详情执行人
        this.addForm.details.forEach((detail) => {
          detail.checkUsersIds = this.addForm.executeUsersIds;
          detail.checkUsers = this.addForm.executeUsers;
        });
        console.log('this.addForm.executeUsers', this.addForm.executeUsers);
      }
    }
  };
</script>

<style scoped lang="scss">
  :deep(.el-form) {
    .el-form-item:last-child {
      margin-bottom: 22px !important;
    }
  }

  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
  }

  .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>