aivfo-oa-web/src/views/task/task.vue

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="5" style="position:relative;z-index: 20">
        <project ref="pjTree" @selectProject="selectProject"></project>
      </el-col>
      <el-col :span="19">
        <div class="query-container">
          <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
            <el-form-item prop="executors">
              <dept-user-tree ref="dut" :userList="userList" :multiple="true"
                              @selected="(val)=>queryParams.executors=val"></dept-user-tree>
            </el-form-item>
            <el-form-item prop="startDate">
              <el-date-picker
                v-model="queryParams.startDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                clearable
                style="width: 135px">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="endDate">
              <el-date-picker
                v-model="queryParams.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                clearable
                style="width: 135px">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="任务状态"
                style="width: 85px">
                <el-option
                  v-for="dict in dict.type.task_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                  <el-tag :type="statusMap[dict.value].type">
                    {{ dict.label }}
                  </el-tag>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="priority">
              <el-select
                v-model="queryParams.priority"
                placeholder="优先级"
                style="width: 85px">
                <el-option
                  v-for="dict in dict.type.task_priority"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                  <el-tag :color="priorityColorMap[dict.value]" effect="dark" :hit="false">
                    {{ dict.label }}
                  </el-tag>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" style="margin-bottom:8px">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['task:task:add']"
              >新增任务
              </el-button>
            </el-col>
          </el-row>
        </div>

        <el-table :data="taskList"
                  ref="taskList"
                  height="calc(100vh - 150px)"
                  @cell-mouse-enter="cellMouseEnter"
                  @cell-mouse-leave="cellMouseLeave"
                  @cell-click="cellClick"
                  @sort-change="sortChange"
                  row-key="id"
                  :indent="10"
                  :tree-props="{children: 'children'}">
          <el-table-column label="任务编号" prop="id"/>
          <el-table-column label="任务名称" prop="taskName" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="执行(负责)人" prop="executorName" width="100"/>
          <el-table-column label="进度" prop="progressValue" width="70">
            <template slot-scope="scope">
              <span>{{ (scope.row.progressValue ? scope.row.progressValue : 0) + '%' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="80">
            <template slot-scope="scope">
              <el-tag size="mini" :type="statusMap[scope.row.status].type">{{
                  statusMap[scope.row.status].name
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="优先级" prop="priority" align="center" width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.priority==='1'" color="#fa8888" effect="dark" :hit="false">
                {{ getTaskPriority(scope.row.priority) }}
              </el-tag>
              <el-tag v-else-if="scope.row.priority==='2'" color="#fb7fb7" effect="dark" :hit="false">
                {{ getTaskPriority(scope.row.priority) }}
              </el-tag>
              <el-tag v-else-if="scope.row.priority==='3'" color="#40e0c3" effect="dark" :hit="false">
                {{ getTaskPriority(scope.row.priority) }}
              </el-tag>
              <el-tag v-else color="#5dcfff" effect="dark" :hit="false">{{
                  getTaskPriority(scope.row.priority)
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" prop="beginDate" sortable="custom" width="100"/>
          <el-table-column label="结束时间" prop="endDate" sortable="custom" width="100"/>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="text"
                         icon="el-icon-coordinate"
                         @click="handleAudit(scope.row)"
                         :disabled="scope.row.status!='6'"
                         v-hasPermi="['task:task:audit']"
              >审核
              </el-button>
              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                           v-hasPermi="['task:task:edit','task:task:split', 'task:task:delete']">
                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="handleSplit" icon="el-icon-tickets"
                                    v-hasPermi="['task:task:split']"
                  >分解
                  </el-dropdown-item>
                  <el-dropdown-item command="handleUpdate" icon="el-icon-edit-outline"
                                    v-hasPermi="['task:task:edit']"
                  >终止
                  </el-dropdown-item>
                  <el-dropdown-item command="handleEdit" icon="el-icon-edit"
                                    v-hasPermi="['task:task:edit']"
                  >修改
                  </el-dropdown-item>
                  <el-dropdown-item command="handleDelete" icon="el-icon-delete"
                                    v-hasPermi="['task:task:delete']"
                  >删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 10px;text-align: center">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 20, 50]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>


    <!-- 添加或修改任务配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" class="add-dialog" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="115px">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="form.taskName" placeholder="请输入任务名称"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属项目" prop="projectId" class="mini-treeselect">
              <treeselect v-model="form.projectId" :options="projectOptions"
                          :open-on-click="true"
                          :normalizer="normalizer"
                          :flat="true"
                          style="width: 220px"
                          placeholder="请选择"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行(负责)人" prop="executor">
              <dept-user-tree ref="dut2" :userList="userList"
                              style="width: 220px"
                              @selected="selectExecutor"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="beginDate">
              <el-date-picker
                v-model="form.beginDate"
                type="date"
                value-format="yyyy-MM-dd"
                @change="checkDates(form.beginDate,form.endDate)"
                style="width: 220px"
                placeholder="开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                @change="checkDates(form.beginDate,form.endDate)"
                type="date"
                value-format="yyyy-MM-dd"
                style="width: 220px"
                placeholder="开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="优先级">
              <el-select
                v-model="form.priority"
                style="width: 220px"
                placeholder="任务优先级">
                <el-option
                  v-for="dict in dict.type.task_priority"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                  <el-tag :color="priorityColorMap[dict.value]" effect="dark" :hit="false">
                    {{ dict.label }}
                  </el-tag>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务附件">
              <file-upload ref="fu" :files="form.fileList" @getFileUrl="getFileUrl"
                           @removeFile="removeFile"></file-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="任务描述" prop="description">
          <rich-text-editor ref="rtEditor" v-model="form.description" v-if="open"></rich-text-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
        <el-button size="mini" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 任务详情对话框 -->
    <el-dialog :title="detailForm.taskName" :visible.sync="detailOpen" width="900px" class="add-dialog" append-to-body
               :close-on-click-modal="true">
      <task-detail :detail-form="detailForm"></task-detail>
    </el-dialog>

    <!-- 审核任务对话框 -->
    <el-dialog :title="detailForm.taskName" :visible.sync="auditOpen" width="900px" class="add-dialog" append-to-body
               @close="auditCancel">
      <task-detail :detail-form="detailForm"></task-detail>
      <el-form ref="auditForm" :model="auditForm" :rules="auditRules" size="mini" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核意见" prop="auditResult">
              <el-radio-group v-model="auditForm.auditResult">
                <el-radio label="1">确认完成</el-radio>
                <el-radio label="0">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="auditForm.auditResult==='0'" label="进度（%）" prop="value">
              <el-input-number v-model="auditForm.value" :min="1" :max="99"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="审核备注" prop="auditOpinion">
          <el-input v-model="auditForm.auditOpinion" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitAudit">确 定</el-button>
        <el-button size="mini" @click="auditCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 分解任务对话框 -->
    <el-dialog :visible.sync="splitOpen" width="900px" class="add-dialog" append-to-body @close="splitCancel">
      <task-split ref="split" :split-form="splitForm" :user-list="userList"></task-split>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="splitCancel">取 消</el-button>
        <el-button type="primary" size="mini" @click="submitSplit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="该时间段内有人员安排冲突,是否继续保存？" :visible.sync="confirmOpen" append-to-body :close-on-click-modal="false">
      <el-table :data="conflictTasks" size="mini">
        <el-table-column label="任务名称" prop="taskName" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="执行(负责)人" prop="executorName"/>
        <el-table-column label="任务起止时间" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.beginDate + ' 至 ' + scope.row.endDate }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitConfirm">确 定</el-button>
        <el-button size="mini" @click="cancelConfirm">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listTask,
  getTask,
  delTask,
  addTask,
  updateTask,
  auditTask,
  splitTask
} from "@/api/task/task";
import {listProject} from "@/api/task/project";
import {getDeptUserTree} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import DeptUserTree from "@/components/DeptUserTree"
import FileUpload from "@/components/FileUpload"
import Project from "@/views/task/components/project";
import TaskDetail from "@/views/task/components/taskDetail"
import TaskSplit from "@/views/task/components/taskSplit"

import RichTextEditor from '@/components/RichTextEditor'
import {mapGetters} from "vuex";
import task from "@/views/mixins/task";
import DateUtil from "@/utils/date";

export default {
  name: "Task",
  components: {Project, TaskDetail, DeptUserTree, FileUpload, Treeselect, RichTextEditor, TaskSplit},
  dicts: ['task_status', 'task_priority'],
  mixins: [task],
  computed: {
    ...mapGetters(['userId'])
  },
  data() {
    return {
      projectOptions: [],
      selectProjectId: undefined,
      userList: [],
      // 总条数
      total: 0,
      // 项目表格数据
      taskList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        executors: [],
        projectId: undefined,
        startDate: undefined,
        endDate: undefined,
        status: '0',
        priority: undefined,
        sortField: undefined,
        order: undefined
      },
      // 表单参数
      form: {},
      detailTitle: "",
      detailOpen: false,
      detailForm: {},
      auditOpen: false,
      auditForm: {},
      splitOpen: false,
      splitForm: {},
      // 表单校验
      rules: {
        taskName: [
          {required: true, message: "任务名称不能为空", trigger: "blur"}
        ],
        projectId: [
          {required: true, message: "所属项目不能为空", trigger: "blur"}
        ],
        beginDate: [
          {required: true, message: "开始时间不能为空", trigger: "change"}
        ],
        endDate: [
          {required: true, message: "结束时间不能为空", trigger: "change"}
        ],
        planHours: [
          {required: true, message: "计划工时不能为空", trigger: "blur"}
        ],
        executor: [
          {required: true, message: "执行人不能为空", trigger: 'change'}
        ]
      },
      auditRules: {
        auditResult: [
          {required: true, message: "审核意见不能为空", trigger: "change"}
        ],
        value: [
          {required: true, message: "进度不能为空", trigger: "blur"}
        ]
      },
      confirmOpen: false,
      conflictTasks: []
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.getList();
      getDeptUserTree('1').then(res => {
        this.userList = res.data
      })
    },
    /** 查询项目列表 */
    getList() {
      if (DateUtil.unix(this.queryParams.startDate) > DateUtil.unix(this.queryParams.endDate)) {
        this.$message.warning("开始时间不能超过结束时间")
        return
      }
      listTask(this.queryParams).then(res => {
          this.taskList = res.data.records;
          this.total = res.data.total;
        }
      );
    },
    selectProject(data) {
      this.selectProjectId = data
      this.queryParams.projectId = data;
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.$refs.taskList.clearSort();
      this.queryParams.sortField = undefined
      this.queryParams.order = undefined
      this.$refs.pjTree.clear()
      this.$refs.dut.clearText()
      this.handleQuery();
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.$refs.dut2.clearText()
      // this.$refs.rtEditor.clear()
      this.$refs.fu.clear()
      this.reset()
      this.open = false;
    },
    reset() {
      this.form = {
        id: undefined,
        taskName: undefined,
        projectId: undefined,
        executor: undefined,
        planHours: undefined,
        beginDate: undefined,
        endDate: undefined,
        description: undefined
      };
      this.resetForm("form");
    },
    // 审核取消按钮
    auditCancel() {
      this.detailForm = {};
      this.auditForm = {
        taskId: undefined,
        auditResult: undefined,
        value: undefined,
        auditOpinion: undefined
      }
      this.resetForm("auditForm");
      this.auditOpen = false;
    },
    // 取消按钮（分解任务）
    async splitCancel() {
      await this.$refs.split.reset();
      // this.splitForm = {}
      this.splitOpen = false;
    },

    /** 查看任务详情*/
    cellClick(row, column, event) {
      if (!column.property || column.property != 'taskName') {
        return
      }
      getTask(row.id).then(res => {
        this.detailForm = res.data;
        this.detailOpen = true;
        this.detailTitle = "任务详情";
      })
    },

    sortChange({column, prop, order}) {
      this.queryParams.sortField = prop
      if (order) {
        this.queryParams.order = order.replace('ending', '')
      }
      this.getList()
    },

    /** 转换项目数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      let newVar = {
        id: node.id,
        label: node.projectName,
        children: node.children,
        isDisabled: node.type === '1'
      };
      return newVar;
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加任务";
      listProject('1').then(response => {
        this.projectOptions = this.handleTree(response.data, "id");
        if (this.selectProjectId && this.projectOptions.length > 0) {
          let ids = this.projectOptions.map(item => item.id);
          if (ids.indexOf(this.selectProjectId) < 0) {
            this.form.projectId = this.selectProjectId
          }
        }
        this.$set(this.form, 'priority', '4')
      });
    },
    async handleEdit(row) {
      this.open = true;
      this.title = "修改任务";
      let arr = []
      arr.push(getTask(row.id).then(res => {
          this.form = res.data;
          this.form['files'] = this.form.files || []
          this.form.files = this.form.fileList
          if (this.form.fileList.length > 0) {
            this.form.files = this.form.fileList.map(item => {
              return {name: item.name, url: item.fileUrl}
            })
          }
        }
      ))
      arr.push(listProject().then(response => {
        this.projectOptions = this.handleTree(response.data, "id");
      }))
      await Promise.all(arr)
      this.$set(this.form, 'rangeDate', [row.beginDate, row.endDate])
      this.$refs.dut2.setCheckedNode(this.form.executor)
    },
    selectExecutor(val) {
      this.$set(this.form, 'executor', val)
    },
    getFileUrl(val) {
      this.form.files = val
    },
    removeFile(val) {
      this.form.files = val
    },

    /** 更多操作触发 */
    handleCommand(command, row) {
      switch (command) {
        case 'handleSplit':
          this.handleSplit(row)
          break
        case 'handleUpdate':
          this.handleUpdate(row)
          break
        case 'handleEdit':
          this.handleEdit(row)
          break
        case 'handleDelete':
          this.handleDelete(row)
          break
        default:
          break
      }
    },

    /** 审核按钮操作 */
    handleAudit(row) {
      getTask(row.id).then(res => {
        this.detailForm = res.data;
        this.auditForm = {
          taskId: row.id,
          auditResult: undefined,
          value: undefined,
          auditOpinion: undefined
        }
        this.auditOpen = true;
      })
    },
    /** 分解按钮操作 */
    handleSplit(row) {
      if (row.status === '4' || row.status === '5') {
        this.$message.info("任务已完成/终止，请勿再分解")
        return
      }
      getTask(row.id).then(res => {
        this.splitForm = res.data
        this.splitForm['parentId'] = row.id
        this.splitForm['children'] = []
        let child = {
          taskName: undefined,
          executor: undefined,
          beginDate: row.beginDate,
          endDate: row.endDate,
          planHours: undefined,
          description: undefined
        }
        this.splitForm.children.push(child)
        this.splitOpen = true
      })
    },

    /** 提交按钮 */
    submitForm() {
      if (this.projectOptions.length > 0) {
        let ids = this.projectOptions.map(item => item.id);
        if (ids.indexOf(this.form.projectId) > -1) {
          this.$message.warning("所属项目不可选择分类")
          return
        }
      }
      if (DateUtil.unix(this.form.beginDate) > DateUtil.unix(this.form.endDate)) {
        this.$message.warning("开始时间不能超过结束时间")
        return
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.files && this.form.files.length > 0) {
            let tempFiles = this.form.files.map(item => item.name);
            this.form.fileUrl = JSON.stringify(tempFiles)
          }
          this.form.checkTaskConflict = true;
          if (!this.form.id) {
            addTask(this.form).then(res => {
              if (res.code === 'S.F-2001') {
                this.conflictTasks = res.data
                this.confirmOpen = true
              } else {
                this.$message.success("新增成功");
                this.open = false;
                this.reset();
                this.getList();
              }
            });
          } else {
            updateTask(this.form).then(res => {
              this.$message.success("操作成功");
              this.open = false;
              this.reset();
              this.getList();
            })
          }
        }
      });
    },

    submitConfirm() {
      if (this.open) {
        this.form.checkTaskConflict = false;
        addTask(this.form).then(res => {
          this.$message.success("新增成功");
          this.open = false;
          this.confirmOpen = false;
          this.reset();
          this.getList();
        });
      }
      if (this.splitOpen) {
        this.splitForm.checkTaskConflict = false;
        splitTask(this.splitForm).then(res => {
          this.resetForm("splitForm");
          this.getList()
          this.splitOpen = false
          this.confirmOpen = false;
          this.$message.success("操作成功");
        })
      }
    },

    cancelConfirm() {
      this.confirmOpen = false;
      // this.open = false;
      // this.splitOpen = false;
      // this.$refs.dut2.clearText()
      // let dutSplit = this.$refs.dutSplit || [];
      // for (let key in dutSplit) {
      //   dutSplit[key].clearText()
      // }
      // this.resetForm("splitForm");
    },

    /** 审核任务提交按钮 */
    submitAudit() {
      this.$refs["auditForm"].validate(valid => {
        if (valid) {
          auditTask(this.auditForm).then(res => {
            this.$message.success("操作成功");
            this.getList()
            this.auditCancel()
          })
        }
      });
    },
    /** 分解任务提交按钮 */
    submitSplit() {
      let data = this.$refs.split.submit();
      if (!data) {
        return
      }
      this.splitForm = data;
      this.$set(this.splitForm, 'checkTaskConflict', true)
      splitTask(this.splitForm).then(res => {
        if (res.code === 'S.F-2001') {
          this.conflictTasks = res.data
          this.confirmOpen = true
        } else {
          this.resetForm("splitForm");
          this.getList()
          this.splitOpen = false
          this.$message.success("操作成功");
        }
      })
    },

    /** 终止按钮操作 */
    handleUpdate(row) {
      this.$confirm('是否确认终止任务编号为"' + row.id + '"的任务？').then(() => {
        return updateTask({id: row.id, status: '5'});
      }).then(() => {
        this.getList();
        this.$message.success("终止成功");
      }).catch(() => {
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除任务编号为"' + row.id + '"的数据项？').then(() => {
        return delTask(row.id);
      }).then(() => {
        this.getList();
        this.$message.success("删除成功");
      }).catch(() => {
      });
    }

  }
};
</script>
<style scoped lang="scss">
.split-form {

  ::v-deep .el-form-item__label {
    font-size: 13px;
  }

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

  ::v-deep.el-card__header {
    padding: 5px 10px;
  }

  ::v-deep.el-card__body {
    padding: 5px;
  }
}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.mini-treeselect {
  ::v-deep.vue-treeselect__control {
    height: 28px;
  }

  ::v-deep.vue-treeselect__placeholder, .vue-treeselect__single-value {
    padding-left: 10px;
    line-height: 28px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between
}

.add-dialog ::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px;
}

.split-card {
  width: 49%;
  padding: 5px 10px;
  margin: 5px;
}

.el-tag--dark {
  border-color: white;
}

</style>