|
|
@@ -0,0 +1,121 @@
|
|
|
+<template>
|
|
|
+ <div class="knowledge-type-edit-container">
|
|
|
+ <el-dialog title="关联组织" v-model="state.dialogVisible" draggable append-to-body destroy-on-close @close="close" width="500px">
|
|
|
+ <el-form :model="state.ruleForm" ref="ruleFormRef" label-width="80px" v-loading="state.loading">
|
|
|
+ <el-form-item label="关联组织" prop="orgArray" :rules="[{ required: true, message: '请选择关联组织', trigger: 'change' }]">
|
|
|
+ <el-cascader
|
|
|
+ :options="orgData"
|
|
|
+ filterable
|
|
|
+ :props="{ value: 'id', label: 'name', emitPath: false, multiple: true }"
|
|
|
+ placeholder="请选择关联组织"
|
|
|
+ class="w100"
|
|
|
+ v-model="state.ruleForm.orgArray"
|
|
|
+ ref="orgRef"
|
|
|
+ @change="changeOrgData"
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ :max-collapse-tags="3"
|
|
|
+ >
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="closeDialog" class="default-button">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading">确 定 </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="knowledgeTypeEdit">
|
|
|
+import { reactive, ref } from 'vue';
|
|
|
+import { ElMessage, FormInstance } from 'element-plus';
|
|
|
+import { updateType, typeDetail } from '@/api/knowledge/type';
|
|
|
+import { getCanUseOrg } from '@/api/system/user';
|
|
|
+
|
|
|
+// 定义子组件向父组件传值/事件
|
|
|
+const emit = defineEmits(['updateList']);
|
|
|
+
|
|
|
+// 定义变量内容
|
|
|
+const state = reactive<any>({
|
|
|
+ dialogVisible: false, // 弹窗
|
|
|
+ ruleForm: {
|
|
|
+ name: '', // 类型名称
|
|
|
+ sort: 0, // 排序
|
|
|
+ parentId: '', // 上级类型
|
|
|
+ orgArray: [],
|
|
|
+ },
|
|
|
+ loading: false, // 加载
|
|
|
+});
|
|
|
+// 获取机构数据
|
|
|
+const orgData = ref<any[]>([]);
|
|
|
+const getOrgData = async () => {
|
|
|
+ state.loading = true;
|
|
|
+ getCanUseOrg()
|
|
|
+ .then((res: any) => {
|
|
|
+ orgData.value = res?.result ?? [];
|
|
|
+ state.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+// 打开弹窗
|
|
|
+const ruleFormRef = ref<any>(); // 表单ref
|
|
|
+const openDialog = async (row: any) => {
|
|
|
+ try {
|
|
|
+ await getOrgData();
|
|
|
+ const { result } = await typeDetail(row.id);
|
|
|
+ state.ruleForm = result;
|
|
|
+ state.ruleForm.orgArray = result.knowledgeTypeOrgs.map((item: any) => item.orgId);
|
|
|
+ state.dialogVisible = true;
|
|
|
+ } catch (error) {
|
|
|
+ // 打印错误信息
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+};
|
|
|
+const close = () => {
|
|
|
+ ruleFormRef.value?.clearValidate();
|
|
|
+ ruleFormRef.value?.resetFields();
|
|
|
+};
|
|
|
+// 关闭弹窗
|
|
|
+const closeDialog = () => {
|
|
|
+ state.dialogVisible = false;
|
|
|
+};
|
|
|
+// 选择适用部门
|
|
|
+const orgRef = ref<RefType>();
|
|
|
+const changeOrgData = () => {
|
|
|
+ let currentNode = orgRef.value.getCheckedNodes();
|
|
|
+ state.ruleForm.typeOrgDtos = currentNode.map((item: any) => {
|
|
|
+ return {
|
|
|
+ orgId: item.value,
|
|
|
+ orgName: item.label,
|
|
|
+ };
|
|
|
+ });
|
|
|
+};
|
|
|
+// 保存
|
|
|
+const onSubmit = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ await formEl.validate((valid: boolean) => {
|
|
|
+ if (!valid) return;
|
|
|
+ state.loading = true;
|
|
|
+ updateType(state.ruleForm)
|
|
|
+ .then(() => {
|
|
|
+ closeDialog(); // 关闭弹窗
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ state.loading = false;
|
|
|
+ emit('updateList');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+// 暴露变量
|
|
|
+defineExpose({
|
|
|
+ openDialog,
|
|
|
+ closeDialog,
|
|
|
+});
|
|
|
+</script>
|
zhangchong