kd-aiot-frontend-wt/src/views/bpm/documents/documentTemplate/components/mainBodyTemplate.vue

<template>
  <div class="main-body-template">
    <h2 class="title">发文通知稿纸</h2>

    <el-form :model="form" :rules="rules" ref="form" label-width="0">
      <table class="table-container" border="1" cellpadding="0" cellspacing="0">
        <!-- 第一行：发文名称 + 发文字号/申请编码 -->
        <tr>
          <td class="label required">发文名称</td>
          <td colspan="2">
            <el-form-item prop="documentName">
              <el-input v-model="form.documentName" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </td>
          <td class="label required">发文字号</td>
          <td colspan="2">
            <el-form-item prop="documentNumber">
              <el-input v-model="form.documentNumber" :disabled="menu == 'template' || disabled" placeholder="自动填充">
                <!-- <template slot="append">
                  <el-button :disabled="disabled" type="text" size="mini" class="code-btn" @click="getCodeOpen">申请编码</el-button>
                </template> -->
              </el-input>
            </el-form-item>
          </td>
        </tr>

        <!-- 第二行：发文机关 + 拟稿人 -->
        <tr>
          <td class="label required">发文机关</td>
          <td colspan="2">
            <el-form-item prop="issuingAuthority">
              <el-cascader
               :show-all-levels="false"
                class="ele-block"
                :disabled="disabled"
                :options="organizationList"
                placeholder="请选择部门"
                :props="defaultSingleProps"
                ref="deptRef"
                @change="handleIssuingAuthorityChange"
                v-model="form.issuingAuthority"
                clearable
              ></el-cascader>
            </el-form-item>
            <div class="hint-text">修改发文机关，将移除主送机关、抄送机关</div>
            <el-checkbox v-model="form.jointIssuance" :disabled="disabled">联合发文</el-checkbox>
            <el-cascader
              class="ele-block"
               :show-all-levels="false"
              v-if="form.jointIssuance"
              :disabled="disabled"
              :options="organizationList"
              placeholder="请选择联合发文部门"
              :props="defaultProps"
              v-model="form.jointIssuingAuthority"
              clearable
            ></el-cascader>
          </td>
          <td class="label required">拟稿人</td>
          <td colspan="2">
            <el-form-item prop="draftPersonId">
              <!-- <el-input v-model="form.draftPerson" placeholder="请输入">
                <template slot="append">
                  <el-button type="text" icon="el-icon-user"></el-button>
                </template>
              </el-input> -->
              <personSelect
                ref="directorRef"
                :disabled="disabled"
                :init="false"
                v-model="form.draftPersonId"
                @selfChange="changeUserInfo"
              />
            </el-form-item>
          </td>
        </tr>

        <!-- 第三行：主送 + 抄送 -->
        <tr>
          <td class="label">主送</td>
          <td colspan="2">
            <el-form-item prop="mainRecipient">
              <!-- <el-select v-model="form.mainRecipient" placeholder="请选择" multiple style="width: 100%;">
                <el-option label="部门1" value="dept1" />
                <el-option label="部门2" value="dept2" />
              </el-select> -->
              <el-cascader
                class="ele-block"
                :disabled="disabled"
                :options="organizationList"
                placeholder="请选择部门"
                :props="defaultProps"
                :show-all-levels="false"
                v-model="form.mainRecipient"
                clearable
              ></el-cascader>
            </el-form-item>
          </td>
          <td class="label">抄送</td>
          <td colspan="2">
            <el-form-item prop="ccRecipient">
              <!-- <el-select v-model="form.ccRecipient" placeholder="请选择" multiple style="width: 100%;">
                <el-option label="部门1" value="dept1" />
                <el-option label="部门2" value="dept2" />
              </el-select> -->
              <el-cascader
                class="ele-block"
                :disabled="disabled"
                :options="organizationList"
                placeholder="请选择部门"
                :props="defaultProps"
                v-model="form.ccRecipient"
                :show-all-levels="false"
                clearable
              ></el-cascader>
            </el-form-item>
          </td>
        </tr>

        <!-- 第四行：发文单位意见 -->
        <tr>
          <td class="label">发文单位意见</td>
          <td colspan="4">
            <el-form-item prop="unitOpinion">
              <el-input v-model="form.unitOpinion" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </td>
        </tr>

        <!-- 第五行：会办单位意见 + 核稿 -->
        <tr>
          <td class="label">会办单位意见</td>
          <td colspan="2">
            <el-form-item prop="coUnitOpinion">
              <el-input v-model="form.coUnitOpinion" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </td>
          <td class="label">核稿</td>
          <td colspan="2">
            <el-form-item prop="reviewer">
              <el-input v-model="form.reviewer" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </td>
        </tr>

        <!-- 第六行：主题词 -->
        <tr>
          <td class="label">主题词</td>
          <td colspan="4">
            <el-form-item prop="keywords">
              <el-input v-model="form.keywords" :disabled="disabled" placeholder="请输入，多个主题词，用英文逗号隔开" />
            </el-form-item>
          </td>
        </tr>

        <!-- 第七行：领导批示 -->
        <tr>
          <td class="label">领导批示</td>
          <td colspan="4">
            <el-form-item prop="leaderInstruction">
              <el-input v-model="form.leaderInstruction" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </td>
        </tr>

        <!-- 第八行：秘密等级 + 紧急程度 -->
        <tr>
          <td class="label required">秘密等级</td>
          <td colspan="2">
            <el-form-item prop="secretLevel">
              <el-select v-model="form.secretLevel" :disabled="disabled" placeholder="请选择" style="width: 100%;">
                <el-option label="普通" value="1" />
                <el-option label="秘密" value="2" />
                <el-option label="机密" value="3" />
                <el-option label="绝密" value="4" />
              </el-select>
            </el-form-item>
          </td>
          <td class="label required">紧急程度</td>
          <td colspan="2">
            <el-form-item prop="urgencyLevel">
              <el-select v-model="form.urgencyLevel" :disabled="disabled" placeholder="请选择" style="width: 100%;">
                <el-option label="普通" value="1" />
                <el-option label="紧急" value="2" />
                <el-option label="特急" value="3" />
              </el-select>
            </el-form-item>
          </td>
        </tr>

        <!-- 第九行：保密期限 + 打印份数 -->
        <tr>
          <td class="label">保密期限</td>
          <td colspan="2">
            <div class="input-with-unit">
              <el-form-item prop="secretPeriod" style="flex: 1;">
                <el-input v-model="form.secretPeriod" :disabled="disabled" placeholder="请输入" />
              </el-form-item>
              <el-select v-model="form.secretPeriodUnit" :disabled="disabled" style="width: 60px;">
                <el-option label="年" value="年" />
                <el-option label="月" value="月" />
                <el-option label="日" value="日" />
              </el-select>
            </div>
          </td>
          <td class="label">打印份数</td>
          <td colspan="2">
            <el-form-item prop="printCopies">
              <el-input v-model="form.printCopies" :disabled="disabled" placeholder="请输入" type="number" />
            </el-form-item>
          </td>
        </tr>

        <!-- 第十行：印发机关 + 印发日期 -->
        <tr>
          <td class="label required">印发机关</td>
          <td colspan="2">
            <el-form-item prop="printingAuthority">
              <el-cascader
                class="ele-block"
                :disabled="disabled"
                :options="organizationList"
                placeholder="请选择部门"
                :props="defaultSingleProps"
                ref="printingDeptRef"
                :show-all-levels="false"
                v-model="form.printingAuthority"
                clearable
              ></el-cascader>
            </el-form-item>
          </td>
          <td class="label">印发日期</td>
          <td colspan="2">
            <el-form-item prop="printDate">
              <el-date-picker v-model="form.printDate" :disabled="disabled" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
          </td>
        </tr>

        <!-- 第十一行：说明 + 是否纳入督办 -->
        <tr>
          <td class="label">说明</td>
          <td colspan="2">
            <el-form-item prop="description">
              <el-input v-model="form.description" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </td>
          <td class="label">是否纳入督办</td>
          <td colspan="2">
            <el-form-item prop="includeSupervision">
              <el-select v-model="form.includeSupervision" :disabled="disabled" placeholder="请选择" style="width: 100%;">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </td>
        </tr>

        <!-- 第十二行：附件 -->
        <tr>
          <td class="label">附件</td>
          <td colspan="4">
            <el-form-item prop="attachments">
              <!-- <el-upload action="#" :auto-upload="false" :file-list="fileList">
                <i class="el-icon-upload"></i>
                <span class="upload-text">上传文件，请</span>
                <el-button type="text">点击上传</el-button>
              </el-upload> -->
              <fileMain :type="disabled ? 'view' : 'add'" v-model="form.attachments" @updateVal="getFiles"></fileMain>
            </el-form-item>
          </td>
        </tr>
      </table>
    </el-form>
    <getCode ref="getCode" @success="codeSuccess"></getCode>
  </div>
</template>

<script>
import {
  listOrganizations,
  getUserPage
} from '@/api/system/organization';
import personSelect from "@/components/CommomSelect/person-select.vue";
import getCode from "./getCode.vue";
export default {
  name: 'MainBodyTemplate',
  components: {
    personSelect,
    getCode
  },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    menu: {
      type: String,
      default: 'template'
    },
  },
  data() {
    return {
      form: {
        documentName: '',
        documentNumber: '',
        issuingAuthority: '',
        jointIssuance: false,
        jointIssuingAuthority: '',
        draftPersonId: '',
        draftPerson: '',
        mainRecipient: [],
        ccRecipient: [],
        unitOpinion: '',
        coUnitOpinion: '',
        reviewer: '',
        keywords: '',
        leaderInstruction: '',
        secretLevel: '',
        urgencyLevel: '',
        secretPeriod: '',
        secretPeriodUnit: '年',
        printCopies: '',
        printingAuthority: '',
        printDate: '',
        description: '',
        includeSupervision: '1',
        attachments: []
      },
      fileList: [],
      customFields: [],
      
      // 部门列表数据
      organizationList: [],
      // 人员列表数据
      userList: [],
      // 级联选择器配置
      defaultProps: {
        multiple: true,
        checkStrictly: true,
        emitPath: false,
        children: 'children',
        value: 'id',
        label: 'name'
      },
      defaultSingleProps: {
        checkStrictly: true,
        emitPath: false,
        children: 'children',
        value: 'id',
        label: 'name'
      },
    };
  },
  computed: {
    organization() {
      return this.setList(this.organizationList);
    },
    userInfo() {
      return this.$store.getters.user.info;
    },
    disabled() {
      return this.type == 'detail';
    },
    rules() {
      return {
        documentName: [
          { required: true, message: '请输入发文名称', trigger: 'blur' }
        ],
        documentNumber: [
          { required: this.menu != 'template',  message: '请输入发文字号', trigger: 'blur' }
        ],
        issuingAuthority: [
          { required: true, message: '请选择发文机关', trigger: 'change' }
        ],
        secretLevel: [
          { required: true, message: '请选择秘密等级', trigger: 'change' }
        ],
        urgencyLevel: [
          { required: true, message: '请选择紧急程度', trigger: 'change' }
        ],
        printingAuthority: [
          { required: true, message: '请选择印发机关', trigger: 'change' }
        ]
      }
    },
  },
  created() {
    // let userInfo = this.$store.getters.user.info;
    console.log('userInfo:', this.userInfo);
    // 组件创建时获取部门列表
    this.getOrganizationList();
    if(this.type == 'add'){
      this.form.issuingAuthority = this.userInfo.groupId || '';
      this.$nextTick(() => {
        if(this.form.issuingAuthority && this.menu == 'template'){
          this.form.draftPersonId = this.userInfo.userId || '';
          this.handleIssuingAuthorityChange(this.form.issuingAuthority);
        }
      })
    }
    
  },
  methods: {
    setFiles(files) {
      console.log('setFiles~~~', files);
      this.form.attachments = files.map((i) => i.id);
    },
    getFiles() {
      console.log('getFiles~~~', this.form.attachments);
      const ids = JSON.parse(JSON.stringify(this.form.attachments)).join(',');
      this.$emit('sendFiles', ids);
    },
    getCodeOpen() {
      this.$refs.getCode.open('');
    },
    codeSuccess(data) {
      console.log('codeSuccess~~~', data);
        // this.code = code;
        this.$nextTick(() => {
          this.$set(this.form, 'documentNumber', data.code);
        });
      },
    //选择人员数据
    changeUserInfo(val, info) {
      this.form.draftPerson = info.name;
    },
    // 获取部门列表
    getOrganizationList() {
      listOrganizations()
        .then((list) => {
          let _list = list.filter((i) => i.name != '超级管理员');
          // 转换为树形结构
          this.organizationList = this.$util.toTreeData({
            data: _list,
            idField: 'id',
            parentIdField: 'parentId'
          });
        })
        .catch((e) => {
          console.error('获取部门列表失败:', e);
          this.$message.error('获取部门列表失败');
        });
    },
    // 获取人员数据
      getUserList(deptId) {
        // this.form.draftPerson = '';
        if (deptId) {
          this.$refs.directorRef.getList({ deptId });
        }
      },
    // 处理部门列表，设置禁用状态
    // setList(list) {
    //   return list.map((val) => {
    //     // val['disabled'] = val.id == this.form.groupId;
    //     if (val.children) {
    //       val.children = this.setList(val.children);
    //     }
    //     return val;
    //   });
    // },
    // 部门选择变化处理
    handleIssuingAuthorityChange(value) {
      console.log('选择的部门:', value);
      // 印发机关默认为发文机关
      this.form.printingAuthority = value;
      // 清空主送机关、抄送机关
      this.form.mainRecipient = [];
      this.form.ccRecipient = [];
      // 调用获取人员列表方法
      this.getUserList(value);
    },
    generateCode() {
      this.$message.success('生成申请编码');
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 生成自定义字段数据
          const customFields = this.generateCustomFields();
          console.log('自定义字段数据:', customFields);
          // 可以在这里调用API将customFields传到后台
          this.customFields = customFields;
          this.$message.success('提交成功');
        } else {
          this.$message.error('请完善必填项');
          return false;
        }
      });
    },
    // 设置编辑数据，将后台返回的自定义字段数据映射到表单
    setData(customFields) {
      if (!customFields || !Array.isArray(customFields) || customFields.length === 0) {
        console.warn('自定义字段数据为空');
        return;
      }

      // 遍历自定义字段数据，映射到表单
      customFields.forEach(field => {
        const { fieldKey, defaultValue } = field;

        // 根据字段类型处理数据
        if (field.fieldType === 'multipleCascader') {
          // 多选级联选择器处理，恢复成数组
          if (typeof defaultValue === 'string' && defaultValue) {
            console.log('多选级联选择器值:~~', fieldKey, typeof defaultValue, defaultValue);
            this.form[fieldKey] = defaultValue.split(',');
          } else if (Array.isArray(defaultValue)) {
            this.form[fieldKey] = defaultValue;
          } else {
            this.form[fieldKey] = [];
          }
        } else if (field.fieldType === 'cascader') {
          // 单选级联选择器处理，保持原值
          this.form[fieldKey] = defaultValue || '';
        } else if (field.fieldType === 'file') {
          // 文件处理，恢复成数组
          if (typeof defaultValue === 'string' && defaultValue) {
            this.form[fieldKey] = defaultValue.split(',');
          } else if (Array.isArray(defaultValue)) {
            this.form[fieldKey] = defaultValue;
          } else {
            this.form[fieldKey] = [];
          }
        } else if (field.fieldType === 'personSelect') {
          // 人员选择器处理
          this.form[fieldKey] = defaultValue;
          // 如果有draftPersonId字段，也设置
          if (this.form.draftPersonId) {
            this.$nextTick(() => {
              if (this.$refs.directorRef) {
                this.$refs.directorRef.getList({ deptId: this.form.issuingAuthority });
              }
            });
          }
        } else if (field.fieldType === 'date') {
          // 日期处理
          this.form[fieldKey] = defaultValue ? new Date(defaultValue) : '';
        } else if (field.fieldType === 'number') {
          // 数字处理
          this.form[fieldKey] = defaultValue ? String(defaultValue) : '';
        } else if (field.fieldType === 'select') {
          // 下拉选择处理
          this.form[fieldKey] = defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : '';
        } else {
          // 其他字段直接赋值
          this.form[fieldKey] = defaultValue;
        }
      });

      console.log('表单数据已设置:', this.form);

      // 特殊处理：如果设置了发文机关，需要获取对应的人员列表
      if (this.form.issuingAuthority) {
        this.$nextTick(() => {
          // this.handleIssuingAuthorityChange(this.form.issuingAuthority);
          this.getUserList(this.form.issuingAuthority);
        });
      }
    },
    // 生成自定义字段数据
    generateCustomFields() {
      const fieldConfig = [
        {
          fieldKey: 'documentName',
          fieldName: '发文名称',
          fieldType: 'input',
          isRequired: 1,
          placeholder: '请输入',
          defaultValue: '',
          sortOrder: 1
        },
        {
          fieldKey: 'documentNumber',
          fieldName: '发文字号',
          fieldType: 'input',
          isRequired: 1,
          placeholder: '申请编码后自动填充',
          defaultValue: '',
          sortOrder: 2
        },
        {
          fieldKey: 'issuingAuthority',
          fieldName: '发文机关',
          fieldType: 'cascader',
          isRequired: 1,
          placeholder: '请选择部门',
          defaultValue: '',
          sortOrder: 3
        },
        {
          fieldKey: 'jointIssuance',
          fieldName: '联合发文',
          fieldType: 'checkbox',
          isRequired: 0,
          placeholder: '',
          defaultValue: false,
          sortOrder: 4
        },
        {
          fieldKey: 'jointIssuingAuthority',
          fieldName: '联合部门',
          fieldType: 'multipleCascader',
          isRequired: 0,
          placeholder: '请选择联合发文部门',
          defaultValue: [],
          sortOrder: 5
        },
        {
          fieldKey: 'draftPersonId',
          fieldName: '拟稿人',
          fieldType: 'personSelect',
          isRequired: 1,
          placeholder: '请选择',
          defaultValue: '',
          sortOrder: 6
        },
        {
          fieldKey: 'mainRecipient',
          fieldName: '主送',
          fieldType: 'multipleCascader',
          isRequired: 0,
          placeholder: '请选择部门',
          defaultValue: '',
          sortOrder: 7
        },
        {
          fieldKey: 'ccRecipient',
          fieldName: '抄送',
          fieldType: 'multipleCascader',
          isRequired: 0,
          placeholder: '请选择部门',
          defaultValue: '',
          sortOrder: 8
        },
        {
          fieldKey: 'unitOpinion',
          fieldName: '发文单位意见',
          fieldType: 'textarea',
          isRequired: 0,
          placeholder: '请输入',
          defaultValue: '',
          sortOrder: 9
        },
        {
          fieldKey: 'coUnitOpinion',
          fieldName: '会办单位意见',
          fieldType: 'input',
          isRequired: 0,
          placeholder: '请输入',
          defaultValue: '',
          sortOrder: 10
        },
        {
          fieldKey: 'reviewer',
          fieldName: '核稿',
          fieldType: 'input',
          isRequired: 0,
          placeholder: '请输入',
          defaultValue: '',
          sortOrder: 11
        },
        {
          fieldKey: 'keywords',
          fieldName: '主题词',
          fieldType: 'input',
          isRequired: 0,
          placeholder: '请输入，多个主题词，用英文逗号隔开',
          defaultValue: '',
          sortOrder: 12
        },
        {
          fieldKey: 'leaderInstruction',
          fieldName: '领导批示',
          fieldType: 'textarea',
          isRequired: 0,
          placeholder: '请输入',
          defaultValue: '',
          sortOrder: 13
        },
        {
          fieldKey: 'secretLevel',
          fieldName: '秘密等级',
          fieldType: 'select',
          isRequired: 1,
          placeholder: '请选择',
          defaultValue: '',
          sortOrder: 14
        },
        {
          fieldKey: 'urgencyLevel',
          fieldName: '紧急程度',
          fieldType: 'select',
          isRequired: 1,
          placeholder: '请选择',
          defaultValue: '',
          sortOrder: 15
        },
        {
          fieldKey: 'secretPeriod',
          fieldName: '保密期限',
          fieldType: 'input',
          isRequired: 0,
          placeholder: '请输入',
          defaultValue: '',
          sortOrder: 16
        },
        {
          fieldKey: 'secretPeriodUnit',
          fieldName: '保密期限单位',
          fieldType: 'select',
          isRequired: 0,
          placeholder: '请选择',
          defaultValue: '年',
          sortOrder: 17
        },
        {
          fieldKey: 'printCopies',
          fieldName: '打印份数',
          fieldType: 'number',
          isRequired: 0,
          placeholder: '请输入',
          defaultValue: '',
          sortOrder: 18
        },
        {
          fieldKey: 'printingAuthority',
          fieldName: '印发机关',
          fieldType: 'select',
          isRequired: 1,
          placeholder: '请选择',
          defaultValue: '',
          sortOrder: 19
        },
        {
          fieldKey: 'printDate',
          fieldName: '印发日期',
          fieldType: 'date',
          isRequired: 0,
          placeholder: '选择日期',
          defaultValue: '',
          sortOrder: 20
        },
        {
          fieldKey: 'description',
          fieldName: '说明',
          fieldType: 'input',
          isRequired: 0,
          placeholder: '请输入',
          defaultValue: '',
          sortOrder: 21
        },
        {
          fieldKey: 'includeSupervision',
          fieldName: '是否纳入督办',
          fieldType: 'select',
          isRequired: 0,
          placeholder: '请选择',
          defaultValue: 1,
          sortOrder: 22
        },
        {
          fieldKey: 'attachments',
          fieldName: '附件',
          fieldType: 'file',
          isRequired: 0,
          placeholder: '',
          defaultValue: [],
          sortOrder: 23
        }
      ];

      // 将表单数据映射到字段配置
      return fieldConfig.map(field => {
        let value = this.form[field.fieldKey];
        console.log('value~~~', value);
        // 判断多选组件的defaultValue是否为数组，如果是数组的话格式化为逗号分开的字符串
        if (field.fieldType === 'cascader' && Array.isArray(value)) {
          value = value.join(',');
        } else if (field.fieldType === 'file' && Array.isArray(value)) {
          value = value.join(',');
        }
        return {
          fieldKey: field.fieldKey,
          fieldName: field.fieldName,
          fieldType: field.fieldType,
          isRequired: field.isRequired,
          placeholder: field.placeholder,
          defaultValue: value,
          sortOrder: field.sortOrder
        };
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.fileList = [];
    }
  }
};
</script>

<style scoped lang="scss">
.main-body-template {
  padding: 20px;
  background-color: #fff;
}

.title {
  text-align: center;
  color: #ff0000;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.table-container {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ff0000;

  td {
    border: 1px solid #ff0000;
    padding: 8px 12px;
    vertical-align: middle;
    font-size: 14px;
  }

  .label {
    color: #ff0000;
    font-weight: normal;
    width: 150px;
    text-align: left;
    background-color: #fff;

    &.required::after {
      content: '*';
      color: #ff0000;
      margin-left: 4px;
    }
  }

  .code-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .code-text {
      color: #606266;
      font-size: 12px;
    }

    .code-btn {
      padding: 0;
      font-size: 12px;
    }
  }

  .code-display {
    color: #606266;
    font-size: 12px;
    margin-right: 8px;
  }

  .hint-text {
    color: #ff0000;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
  }

  .input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .upload-text {
    color: #909399;
    margin-left: 4px;
  }
}

.form-actions {
  text-align: center;
  margin-top: 20px;

  .el-button {
    margin: 0 10px;
  }
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-input__inner,
::v-deep .el-textarea__inner {
  border: 1px solid #dcdfe6;

  &:focus {
    border-color: #409eff;
  }
}

::v-deep .el-checkbox__label {
  color: #606266;
}
</style>