mec_oa_html/src/views/process/admin/process-manager.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <save-form
        ref="listQuery"
        :model="listQuery"
        :inline="true"
        @submit="handleQuery"
      >
        <el-form-item label="流程名称">
          <el-input
            v-model="listQuery.name"
            placeholder="请输入流程名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="流程状态">
          <el-select v-model="listQuery.status" clearable @change="getList">
            <el-option :label="'启用'" :value="1"></el-option>
            <el-option :label="'停用'" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可用分部">
          <el-select v-model="listQuery.orgId" clearable @change="getList">
            <el-option
              v-for="item in organSearchList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            native-type="submit"
            >搜索</el-button
          >
        </el-form-item>
      </save-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-permisaction="['process:admin:manager:add']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleCreate"
            >新增</el-button
          >
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            v-permisaction="['system:sysrole:edit']"
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
          >编辑</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-permisaction="['system:sysrole:remove']"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
          >删除</el-button>
        </el-col> -->
      </el-row>

      <el-table
        v-loading="loading"
        border
        :data="processValueList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" prop="id" width="60" />
        <el-table-column
          label="名称"
          prop="name"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="可用分部"
          prop="orgNames"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="创建者"
          prop="create_name"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作时间"
          align="center"
          prop="create_time"
          width="240"
        >
          <template slot-scope="{ row }">
            创建时间：{{ row.create_time }}<br />
            更新时间：{{ row.update_time }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="更新时间"
          align="center"
          prop="update_time"
          width="180"
        /> -->
        <el-table-column
          label="排序"
          align="center"
          prop="sort_no"
          width="80"
        />
        <el-table-column
          label="流程状态"
          align="center"
          prop="status"
          width="100"
        >
          <template slot-scope="scope">
            <el-tag type="succes" v-if="scope.row.status">启用</el-tag>
            <el-tag type="danger" v-else>停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              v-permisaction="['process:admin:manager:actionstop']"
              size="mini"
              type="text"
              :icon="
                scope.row.status ? 'el-icon-video-play' : 'el-icon-video-pause'
              "
              @click="handleStatus(scope.row)"
              >{{ scope.row.status ? "停用" : "启用" }}</el-button
            >
            <el-button
              v-permisaction="['process:admin:manager:sort']"
              size="mini"
              type="text"
              icon="el-icon-sort"
              @click="handleSort(scope.row)"
              >排序</el-button
            >
            <el-button
              v-permisaction="['process:admin:manager:clone']"
              size="mini"
              type="text"
              icon="el-icon-receiving"
              @click="handleClone(scope.row)"
              >克隆</el-button
            >
            <el-button
              v-permisaction="['process:admin:manager:edit']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-permisaction="['process:admin:manager:delete']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button
              v-permisaction="['process:admin:manager:orgIds']"
              size="mini"
              type="text"
              icon="el-icon-setting"
              @click="handleSetting(scope.row)"
              >设置分部</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-drawer
        :title="dialogProcessVisibleName === 1 ? '新建流程' : '编辑流程'"
        direction="rtl"
        :visible.sync="open"
        :before-close="handleClose"
        size="90%"
      >
        <div v-if="open" class="tpl-create-content" style="margin-right: 15px">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="名称" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    placeholder="请输入流程名称"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="图标" prop="icon">
                  <e-icon-picker v-model="ruleForm.icon" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分类" prop="classify">
                  <el-select
                    v-model="ruleForm.classify"
                    filterable
                    placeholder="请选择流程分类"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in classifyListData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="模版" prop="tpls">
                  <el-select
                    v-model="ruleForm.tpls"
                    filterable
                    multiple
                    placeholder="请选择模版"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in templates"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="通知">
                  <el-select
                    v-model="ruleForm.notice"
                    multiple
                    filterable
                    clearable
                    placeholder="请选择流程任务"
                    style="width: 100%"
                  >
                    <el-option label="推送" :value="1" />
                    <el-option label="IM消息" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="模板类型" prop="sub">
                  <el-select
                    v-model="ruleForm.sub"
                    filterable
                    placeholder="请选择模板类型"
                    style="width: 100%"
                  >
                    <el-option label="父流程" :value="0" />
                    <el-option label="子流程" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="描述" prop="remarks">
              <el-input
                v-model="ruleForm.remarks"
                placeholder="请输入流程描述"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="流程" prop="structure">
              <div style="border-radius: 4px; overflow: hidden">
                <div>
                  <WfdDesign
                    v-if="wfdDesignRefresh"
                    ref="wfd"
                    :users="users"
                    :roles="roles"
                    :departments="departments"
                    :post-options="postOptions"
                    :tasks="taskListData"
                    :process="processData"
                    :templates="ruleForm.tpls"
                    :templates-base="templates"
                    :data="ruleForm.structure"
                    :height="600"
                    :lang="lang"
                  />
                </div>
              </div>
            </el-form-item>
          </el-form>
          <div
            style="text-align: center; margin-top: 20px; margin-bottom: 20px"
          >
            <el-button
              type="primary"
              @click="
                dialogProcessVisibleName === 1
                  ? submitForm('ruleForm')
                  : editForm('ruleForm')
              "
              >提交</el-button
            >
            <el-button @click="handleClose">取 消</el-button>
          </div>
        </div>
      </el-drawer>

      <el-dialog :title="'排序'" :visible.sync="sortOpen" width="400px">
        <div class="tpl-create-content">
          <el-form ref="sortRuleForm" :model="sortRuleForm" label-width="80px">
            <el-form-item
              label="排序值"
              prop="sortNo"
              :rules="[
                {
                  required: true,
                  message: '请输入排序值',
                },
              ]"
              style="width: 95%"
            >
              <!-- <el-input v-model="ruleForm.name" /> -->
              <el-input-number
                v-model="sortRuleForm.sortNo"
                controls-position="right"
                :min="0"
                :max="10000"
                style="width: 100%"
              ></el-input-number>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right">
            <el-button type="primary" @click="handleFormSort('sortRuleForm')"
              >提交</el-button
            >
            <el-button @click="sortOpen = false">取 消</el-button>
          </div>
        </div>
      </el-dialog>

      <el-dialog :title="'设置分部'" :visible.sync="openOrgin" width="500px">
        <div class="tpl-create-content">
          <el-form
            ref="ruleOrganForm"
            :model="ruleOrganForm"
            label-width="100px"
          >
            <el-form-item
              label="可用分部"
              style="width: 95%"
              prop="orgIds"
              :rules="[
                {
                  required: true,
                  message: '请选择可用分部',
                },
              ]"
            >
              <div class="select-all">
                <el-select
                  v-model="ruleOrganForm.orgIds"
                  clearable
                  placeholder="请选择可用分部"
                  style="width: 100%"
                  multiple
                  class="select"
                  collapse-tags
                  ref="select"
                  @change="handleOrganChange"
                >
                  <el-option
                    v-for="item in organSearchList"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
                <el-button class="btn" @click="selectAll">全选</el-button>
              </div>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right">
            <el-button type="primary" @click="setOrgIdsForm('ruleOrganForm')"
              >提交</el-button
            >
            <el-button @click="openOrgin = false">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  processList,
  createProcess,
  updateProcess,
  processDetails,
  deleteProcess,
  cloneProcess,
  statusProcess,
  sortProcess,
  orgIdsProcess,
} from "@/api/process/admin/process";

import { queryUserInfo, queryAllToOrgan } from "@/api/process/work-order";
import SaveForm from "@/components/save-form";
import { classifyList } from "@/api/process/admin/classify";
import { templateList } from "@/api/process/admin/template";
import { taskList } from "@/api/process/admin/task";
import { listUser } from "@/api/system/sysuser";
import { listRole } from "@/api/system/role";
import { listPost } from "@/api/system/post";
// import { getOrdinaryDeptList } from '@/api/system/dept'
import { treeselect } from "@/api/system/dept";
import load from "@/utils/loading";
export default {
  name: "Process",
  components: {
    WfdDesign: () => import("@/components/wfd/components/Wfd"),
    SaveForm,
  },
  data() {
    return {
      queryParams: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 是否显示弹出层
      open: false,
      // 查询参数
      structureValue: [],
      users: [],
      roles: [],
      groups: [],
      departments: [],
      postOptions: [],
      templates: [],
      taskListData: [],
      processData: [],
      wfdDesignRefresh: true,
      classifyListData: [],
      dialogProcessVisibleName: 1,
      processValueList: [],
      listQuery: {
        status: null,
        page: 1,
        orgId: "",
        per_page: 10,
      },
      lang: "zh",
      ruleForm: {},
      rules: {
        icon: [
          { required: true, message: "请输入流程图标", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入流程名称", trigger: "blur" }],
        classify: [
          { required: true, message: "请选择流程分类", trigger: "change" },
        ],
        tpls: [{ required: true, message: "请选择模版", trigger: "change" }],
        sub: [{ required: true, message: "请选择模版类型", trigger: "change" }],
        structure: [{ required: true, message: "请设计流程", trigger: "blur" }],
        remarks: [
          { required: true, message: "请输入流程描述", trigger: "blur" },
        ],
      },
      sortOpen: false,
      sortRuleForm: {
        id: null,
        sortNo: 0,
      },
      openOrgin: false,
      tenantId: 1,
      organSearchList: [], // 只是搜索使用
      organList: [],
      organSetList: [], // 只是设置使用
      ruleOrganForm: {
        id: null,
        orgIds: [],
      },
    };
  },
  mounted() {
    this.getList();
    this.getUserInfo();
    this.getAllOrgan();
  },
  methods: {
    async getUserInfo() {
      await queryUserInfo().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.userIds = res.data.id;
          this.tenantId = res.data.tenantId;
          this.userType = res.data.userType;
        } else {
          this.$message.error(res.data);
        }
      });
    },
    // 获取任务列表
    async getTaskList() {
      await taskList({
        page: 1,
        per_page: 99999,
      }).then((response) => {
        this.taskListData = response.data.data;
      });
    },
    async getProcessList() {
      await processList({
        page: 1,
        per_page: 99999,
      })
        .then((response) => {
          const tempList = response.data.data || [];
          const subList = [];
          tempList.forEach((item) => {
            if (item.sub == 1) {
              subList.push(item);
            }
          });
          this.processData = subList;
        })
        .catch(() => {
          load.endLoading();
        });
    },
    // 获取流程分类列表
    async getClassifyList() {
      await classifyList({
        page: 1,
        per_page: 99999,
      })
        .then((response) => {
          this.classifyListData = response.data.data;
        })
        .catch(() => {
          load.endLoading();
        });
    },
    // 获取模版列表
    async getTemplates() {
      await templateList({
        page: 1,
        per_page: 99999,
      })
        .then((response) => {
          this.templates = response.data.data;
        })
        .catch(() => {
          load.endLoading();
        });
    },
    // 获取用户
    async getUsers() {
      await listUser({
        pageSize: 999999,
      })
        .then((response) => {
          this.users = response.data.list;
        })
        .catch(() => {
          load.endLoading();
        });
    },
    async getRoles() {
      await listRole({
        pageSize: 999999,
      })
        .then((response) => {
          this.roles = response.data.list;
        })
        .catch(() => {
          load.endLoading();
        });
    },
    // 获取部门
    async getDepartments() {
      await treeselect()
        .then((response) => {
          this.departments = response.data;
        })
        .catch(() => {
          load.endLoading();
        });
    },
    // 获取岗位
    async getPostOptions() {
      await listPost({
        page: 1,
        pageSize: 99999,
      })
        .then((response) => {
          this.postOptions = response.data.list;
        })
        .catch(() => {
          load.endLoading();
        });
    },
    /** 查询流程列表 */
    getList() {
      this.loading = true;
      this.listQuery.page = this.queryParams.pageIndex;
      this.listQuery.per_page = this.queryParams.pageSize;
      processList(this.listQuery).then((response) => {
        this.processValueList = response.data.data;
        this.queryParams.pageIndex = response.data.page;
        this.queryParams.pageSize = response.data.per_page;
        this.total = response.data.total_count;
        this.loading = false;
      });
    },
    async getProcessInitData() {
      await this.getClassifyList();
      await this.getTemplates();
      await this.getUsers();
      await this.getRoles();
      await this.getDepartments();
      await this.getProcessList();
      await this.getPostOptions();
    },
    async handleCreate() {
      load.startLoading();
      await this.getProcessInitData();
      load.endLoading();
      this.ruleForm = {
        id: undefined,
        name: "",
        tpls: [],
        structure: { edges: [], nodes: [], groups: [] },
        classify: "",
        task: [],
        notice: [1],
        sub: 0,
        icon: "",
        remarks: "",
      };
      this.dialogProcessVisibleName = 1;
      this.open = true;
      this.wfdDesignRefresh = false;
      this.$nextTick(() => {
        this.wfdDesignRefresh = true;
      });
    },
    async handleSort(row) {
      try {
        this.sortOpen = true;
        this.sortRuleForm.id = row.id;
        this.sortRuleForm.sortNo = row.sort_no;
      } catch {
        //
      }
    },
    async handleEdit(row) {
      this.dialogProcessVisibleName = 2;
      load.startLoading();
      await this.getProcessInitData();
      load.endLoading();
      this.wfdDesignRefresh = false;
      await processDetails({
        processId: row.id,
      }).then((response) => {
        this.ruleForm = {
          id: response.data.id,
          name: response.data.name,
          tpls: response.data.tpls,
          structure: response.data.structure,
          classify: response.data.classify,
          task: response.data.task,
          notice: response.data.notice,
          sub: response.data.sub,
          icon: response.data.icon,
          remarks: response.data.remarks,
        };
        this.wfdDesignRefresh = false;
        this.$nextTick(() => {
          this.wfdDesignRefresh = true;
        });
      });
      this.open = true;
    },
    handleFormSort(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(valid);
          sortProcess(this.sortRuleForm.sortNo, this.sortRuleForm.id).then(
            (res) => {
              if (res.code == 200) {
                this.sortOpen = false;
                this.getList();
                this.$message({
                  type: "success",
                  message: "更新成功",
                });
              }
            }
          );
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.open = false;
          if (done) {
            done();
          }
        })
        .catch((_) => {});
    },
    verifyProcess(structureValue) {
      // console.log(structureValue)
      for (var r of structureValue.nodes) {
        if (r.sort === undefined || r.sort === null || r.sort === "") {
          return "流程节点顺序不能为空";
        }
        //  else if (r.label === undefined || r.label === null || r.label === '') {
        //   return '流程节点标题不能为空'
        // }
        if (r.clazz === "userTask" || r.clazz === "receiveTask") {
          if (
            r.assignType === undefined ||
            r.assignType === null ||
            r.assignType === ""
          ) {
            return "审批节点或处理节点的处理人类型不能为空";
          } else if (
            r.assignValue === undefined ||
            r.assignValue === null ||
            r.assignValue === "" ||
            r.assignValue.length === 0
          ) {
            return "审批节点或处理节点的处理人不能为空";
          }
        }
      }
      //  else if (e.label === undefined || e.label === null || e.label === '') {
      //     return '流转标题不能为空'
      //   }
      // console.log(structureValue);
      for (var e of structureValue.edges) {
        if (e.sort === undefined || e.sort === null || e.sort === "") {
          return "流转顺序不能为空";
        } else if (
          e.flowProperties === undefined ||
          e.flowProperties === null ||
          e.flowProperties === ""
        ) {
          return "流转属性不能为空";
        }
      }
      return "";
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var structureValue = this.$refs.wfd.graph.save();
          for (var n of structureValue.nodes) {
            n.sort = "1";
            n.activeOrder = false;
            const tempType = n.assignValue || [];
            if (tempType.includes(4)) {
              n.isCounterSign = true;
            } else {
              n.isCounterSign = false;
            }
          }
          for (var j of structureValue.edges) {
            j.sort = "1";
            j.flowProperties = "1";
          }
          var r = this.verifyProcess(structureValue);
          if (r !== "") {
            this.$message.error(r);
            return;
          }
          if (
            structureValue.nodes.length > 0 &&
            structureValue.edges.length > 0
          ) {
            this.ruleForm.structure = structureValue;
            createProcess(this.ruleForm).then((response) => {
              this.getList();
              this.open = false;
            });
          } else {
            this.$message.error("没有流程数据，请完善流程");
          }
        }
      });
    },
    editForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var structureValue = this.$refs.wfd.graph.save();
          for (var n of structureValue.nodes) {
            n.sort = "1";
            n.activeOrder = false;
            const tempType = n.assignValue || [];
            if (tempType.includes(4)) {
              n.isCounterSign = true;
            } else {
              n.isCounterSign = false;
            }
          }
          for (var j of structureValue.edges) {
            j.sort = "1";
            j.flowProperties = "1";
          }
          var r = this.verifyProcess(structureValue);
          if (r !== "") {
            this.$message.error(r);
            return;
          }
          if (
            structureValue.nodes.length > 0 &&
            structureValue.edges.length > 0
          ) {
            updateProcess({
              id: this.ruleForm.id,
              name: this.ruleForm.name,
              tpls: this.ruleForm.tpls,
              structure: structureValue,
              classify: this.ruleForm.classify,
              task: this.ruleForm.task,
              notice: this.ruleForm.notice,
              sub: this.ruleForm.sub,
              icon: this.ruleForm.icon,
              remarks: this.ruleForm.remarks,
            }).then((response) => {
              this.getList();
              this.open = false;
            });
          } else {
            this.$notify({
              title: "错误",
              message: "没有流程数据，请完善流程",
              type: "error",
            });
          }
        }
      });
    },
    handleQuery() {
      this.queryParams.pageIndex = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    selectAll() {
      const { options } = this.$refs.select;
      const values = options
        .filter((item) => !item.disabled && item.value)
        .map((item) => item.value);
      this.ruleOrganForm.orgIds = values;
    },
    async getAllOrgan() {
      // 获取分部
      queryAllToOrgan({ tenantId: this.tenantId }).then((res) => {
        if (res.code == 200) {
          const result = res.data;
          const filterOrganId = [
            1, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
            22, 23, 25, 26, 27, 28, 34, 37, 40, 71, 72, 123, 124, 125, 128, 134,
            148, 147, 127, 139, 151, 36, 149, 152, 153,
          ];

          // 搜索的分部
          const filterSearchOrganId = [
            148, 147, 127, 151, 36, 149, 152, 16, 1, 40, 15, 23, 28, 17, 6, 8,
            13, 134, 139, 153, 71, 123
          ];

          let tempOrgan = [];
          let tempSearchOrgan = [];
          // 过滤不会显示的分部
          result.forEach((item) => {
            if (filterOrganId.includes(item.id)) {
              tempOrgan.push(item);
            }
            if (filterSearchOrganId.includes(item.id)) {
              tempSearchOrgan.push(item);
            }
          });
          this.organList = tempOrgan;
          this.organSearchList = tempSearchOrgan;
        }
      });
    },
    handleSetting(row) {
      this.ruleOrganForm.id = row.id;
      const ids = row.org_ids
        ? row.org_ids.split(",").map((item) => Number(item))
        : [];

      const tempOrganSet = [...this.organSearchList];
      const lastIds = []
      tempOrganSet.forEach((item) => {
        if(ids.includes(item.id)){
          lastIds.push(item.id)
        }
      });

      tempOrganSet.sort((a, b) => {
        return a.id - b.id;
      });

      this.ruleOrganForm.orgIds = lastIds;
      this.organSetList = tempOrganSet;

      this.openOrgin = true;
    },
    handleOrganChange(val) {
      // console.log(val)
      // const tempOrganSet = [...this.organSetList];
      // tempOrganSet.forEach((item) => {
      //   if (!val.includes(item.id)) {
      //     const index = this.organSearchList.findIndex((tempItem) => {
      //       return tempItem.id === item.id;
      //     });
      //     if (index === -1) {
      //       item.disabled = true;
      //     } else {
      //       item.disabled = false;
      //     }
      //   }
      // })
      // this.organSetList = tempOrganSet;
    },
    setOrgIdsForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            await orgIdsProcess(
              this.ruleOrganForm.id,
              this.ruleOrganForm.orgIds.join(",")
            );
            this.$message.success("设置成功");
            this.getList();
            this.openOrgin = false;
          } catch {}
        }
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteProcess({
            processId: row.id,
          }).then((response) => {
            if (response !== undefined) {
              this.getList();
              this.$message({
                type: "success",
                message: "流程已删除!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange() {},
    handleSave(values) {
      if (values.list.length > 0) {
        this.ruleForm.form_structure = values;
      } else {
        this.ruleForm.form_structure = "";
      }
    },
    handleStatus(row) {
      const str = row.status ? "停用" : "启用";
      this.$confirm(`是否${str}流程 < ${row.name} > ?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        const status = row.status ? 0 : 1;
        statusProcess(status, row.id).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: `流程已${str}!`,
          });
        });
      });
    },
    handleClone(row) {
      this.$confirm(`确认克隆流程 < ${row.name} > ?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          cloneProcess(row.id).then(() => {
            this.getList();
            this.$message({
              type: "success",
              message: "流程已克隆!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style scoped>
:deep(.el-drawer__body) {
  overflow-y: auto;
}

.select-all {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.select-all .select {
  flex: 1;
}
.select-all .select :deep(.el-input__inner) {
  min-height: 37px !important;
  border-radius: 4px 0 0 4px;
}
.btn {
  border-left: none;
  border-radius: 0 4px 4px 0;
  min-height: 37px;
}
.item {
  width: 100%;
  position: absolute;
  z-index: 1000;
  min-height: 40px;
}
.item .showDev {
  width: 100%;
}

/* .select-all  ::v-deep .el-select__tags {
    flex-wrap: nowrap !important;
  }

.selectWrap {
  ::v-deep .el-select__tags {
    flex-wrap: wrap !important;
  }
} */
</style>