@utogether/udp-core 1.0.1-beta.15 → 1.0.1-beta.17

package/src/views/organization/department/DepartmentPanel.vue

@@ -1,283 +1,269 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-11-17 16:42:14
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-29 09:02:32
- * @Description: 部门管理
--->
-
-<template>
-  <div class="page-content">
-    <!-- 工具栏 -->
-    <vxe-toolbar perfect class="">
-      <template #buttons>
-        <ut-button status="u-cyan" icon="ri-add-line" content="add" @tap="handleAdd()" />
-        <ut-button status="primary" icon="ri-edit-box-line" content="edit" @tap="handleEdit('update')" />
-        <ut-button status="danger" icon="ri-close-fill" content="delete" @tap="handleDelete()" />
-      </template>
-    </vxe-toolbar>
-    <el-row
-      v-if="data.dialogFormVisible"
-      v-spinning="data.loading"
-      type="flex"
-      justify="center"
-      align="middle"
-      class="w-departInfo-wrapper"
-    >
-      <el-card width="60%" shadow="always" class="box-card w-card-wrapper">
-        <div class="clearfix">
-          <span class="w-card-title" />
-        </div>
-        <el-row>
-          <vxe-form ref="xForm" :data="data.record" :rules="rules" label-width="90px">
-            <vxe-form-item
-              :title="$t('message.deptName')"
-              field="deptName"
-              :item-render="{ name: '$input', props: { disabled: data.dataStatus === 'detail' } }"
-              :span="24"
-            />
-            <vxe-form-item
-              :title="$t('message.deptCode')"
-              field="deptCode"
-              :item-render="{ name: '$input', props: { disabled: data.dataStatus !== 'add' } }"
-              :span="24"
-            />
-            <vxe-form-item
-              :title="$t('message.deptType')"
-              field="deptType"
-              :item-render="{
-                name: '$select',
-                options: dataDict['SU.DEPARTMENT.TYPE']?.children,
-                optionProps: { label: 'dictName', value: 'dictCode' },
-                props: { disabled: data.dataStatus === 'detail' }
-              }"
-              :span="24"
-            />
-          </vxe-form>
-        </el-row>
-        <el-row type="flex" justify="center">
-          <vxe-checkbox
-            v-if="data.dataStatus === 'add'"
-            v-model="data.isChecked"
-            style="padding-top: 5px; margin-right: 8px"
-            >{{ $t('message.udp.continueAdd') }}</vxe-checkbox
-          >
-          <ut-button
-            v-if="data.dataStatus !== 'detail'"
-            status="primary"
-            content="confirm"
-            @tap="handleComfirm"
-          />
-          <ut-button
-            v-if="data.dataStatus !== 'detail'"
-            status="warning"
-            content="cancel"
-            @click="handleCancle"
-          />
-        </el-row>
-      </el-card>
-    </el-row>
-    <el-row v-else class="w-noclick-wrapper">
-      <!-- <span class="w-department-header">{{ $t('setting.deartment.organization') }}</span> -->
-      <div class="w-content-wrapper">
-        <ul>
-          <li class="w-department-line">
-            <div>● 点击新建，新建部门信息。</div>
-            <div style="margin: 0; text-indent: 2em">
-              已点击树结构上的部门名称，默认创建为当前部门的下属部门
-            </div>
-            <div style="margin: 0; text-indent: 2em">未点击树结构上的部门名称，则创建为一级部门</div>
-          </li>
-          <li class="w-department-line">● 点击树结构上的部门名称，点击修改按钮，修改部门信息。</li>
-          <li class="w-department-line">
-            <div>● 点击树结构上的部门名称，点击删除按钮，删除部门信息。</div>
-            <div style="text-indent: 2em">当部门下有人员存在时，不允许删除部门信息。</div>
-          </li>
-        </ul>
-      </div>
-    </el-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { reactive, watch, inject } from 'vue';
-import { templateRef } from '@vueuse/core';
-import { clone } from 'xe-utils';
-import to from 'await-to-js';
-import { VXETable, VxeFormPropTypes } from 'vxe-table';
-import { successMessage, warnMessage } from '@utogether/utils';
-import { useSystemStoreHook } from '../../../store/modules/system';
-import { getServiceApi } from '../../../api';
-
-const data = reactive<IRecord>({
-  record: {},
-  dataList: [],
-  loading: false,
-  dialogFormVisible: false,
-  isChecked: false,
-  dataStatus: ''
-});
-
-const dataDict = useSystemStoreHook().getDataDict;
-const { t } = useI18n();
-const serviceApi = getServiceApi();
-
-const rules: VxeFormPropTypes.Rules = {
-  deptName: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.deptName')}`
-    }
-  ],
-  deptCode: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.deptCode')}`
-    }
-  ],
-  deptType: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.deptType')}`
-    }
-  ]
-};
-
-const active: IRecord = inject('active');
-// const treeList = inject('treeList');
-const scrollPanelChange: IRecord = inject('scrollPanelChange');
-
-const url = '/uums/department';
-
-watch(
-  () => active.value,
-  (newVal, oldVal) => {
-    data.record = active.value;
-    newVal?.id && oldVal?.id && newVal !== oldVal && handleEdit('detail');
-  }
-);
-
-// 新增子类型
-const handleAdd = () => {
-  data.dataStatus = 'add';
-  data.record = {};
-  data.record.parentId = active.value?.id;
-  data.isChecked = false;
-  data.dialogFormVisible = true;
-};
-// 编辑
-const handleEdit = dataStatus => {
-  data.dataStatus = dataStatus;
-  data.record = clone(active.value, true);
-  data.dialogFormVisible = true;
-};
-
-const xForm = templateRef<any>('xForm', null);
-const handleComfirm = () => {
-  xForm.value.validate(async valid => {
-    if (!valid) {
-      const { record, dataStatus } = data;
-      data.loading = true;
-      const [err] =
-        dataStatus === 'add'
-          ? await to(serviceApi.post(url, record))
-          : await to(serviceApi.put(url, record));
-      data.loading = false;
-      if (!err) {
-        actionComplete();
-      }
-    }
-  });
-};
-
-const handleDelete = async () => {
-  const { record } = data;
-  if (record.children.length) return warnMessage(t('message.deletePartment'));
-  const type = await VXETable.modal.confirm(t('message.tip.del'));
-  if (type === 'confirm') {
-    await serviceApi.delete(url, record);
-    actionComplete();
-  }
-};
-
-const actionComplete = () => {
-  scrollPanelChange.value = true;
-  successMessage(t('message.operateSuccess'));
-  handleClose();
-  // scrollPanelChange.value = false;
-};
-
-const handleCancle = () => {
-  if (data.dataStatus === 'add') {
-    data.dialogFormVisible = false;
-  }
-  data.dataStatus = '';
-};
-
-const handleClose = () => {
-  data.dialogFormVisible = false;
-};
-</script>
-<style lang="scss" scoped>
-.page-content {
-  background-color: #fff;
-
-  .w-departInfo-wrapper {
-    width: 96%;
-    height: 75vh;
-
-    .w-card-wrapper {
-      width: 40%;
-
-      .el-card__header {
-        padding: 10px 20px;
-
-        .w-card-title {
-          position: relative;
-          top: 5px;
-        }
-      }
-    }
-
-    .el-form-item {
-      margin-bottom: 12px;
-    }
-  }
-
-  .w-noclick-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-
-    .w-content-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 75vh;
-
-      ul {
-        padding: 24px;
-        border: 1px solid #ccc;
-        border-radius: 10px;
-      }
-    }
-
-    .w-department-header {
-      padding-right: 20px;
-      font-size: 26px;
-      font-weight: bolder;
-      color: #69c;
-    }
-
-    .w-department-line {
-      font-size: 16px;
-      line-height: 35px;
-      color: #999;
-      list-style: none;
-    }
-  }
-}
-</style>
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:42:14
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-29 09:02:32
+ * @Description: 部门管理
+-->
+
+<template>
+  <div class="page-content">
+    <!-- 工具栏 -->
+    <vxe-toolbar perfect class="">
+      <template #buttons>
+        <ut-button status="u-cyan" icon="ri-add-line" content="add" @tap="handleAdd()" />
+        <ut-button status="primary" icon="ri-edit-box-line" content="edit" @tap="handleEdit('update')" />
+        <ut-button status="danger" icon="ri-close-fill" content="delete" @tap="handleDelete()" />
+      </template>
+    </vxe-toolbar>
+    <el-row
+      v-if="data.dialogFormVisible"
+      v-spinning="data.loading"
+      type="flex"
+      justify="center"
+      align="middle"
+      class="w-departInfo-wrapper"
+    >
+      <el-card width="60%" shadow="always" class="box-card w-card-wrapper">
+        <div class="clearfix">
+          <span class="w-card-title" />
+        </div>
+        <el-row>
+          <vxe-form ref="xForm" :data="data.record" :rules="rules" label-width="90px">
+            <vxe-form-item
+              :title="$t('message.deptName')"
+              field="deptName"
+              :item-render="{ name: '$input', props: { disabled: data.dataStatus === 'detail' } }"
+              :span="24"
+            />
+            <vxe-form-item
+              :title="$t('message.deptCode')"
+              field="deptCode"
+              :item-render="{ name: '$input', props: { disabled: data.dataStatus !== 'add' } }"
+              :span="24"
+            />
+            <vxe-form-item
+              :title="$t('message.deptType')"
+              field="deptType"
+              :item-render="{
+                name: '$select',
+                options: dataDict['SU.DEPARTMENT.TYPE']?.children,
+                optionProps: { label: 'dictName', value: 'dictCode' },
+                props: { disabled: data.dataStatus === 'detail' }
+              }"
+              :span="24"
+            />
+          </vxe-form>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <vxe-checkbox
+            v-if="data.dataStatus === 'add'"
+            v-model="data.isChecked"
+            style="padding-top: 5px; margin-right: 8px"
+            >{{ $t('message.udp.continueAdd') }}</vxe-checkbox
+          >
+          <ut-button v-if="data.dataStatus !== 'detail'" status="primary" content="confirm" @tap="handleComfirm" />
+          <ut-button v-if="data.dataStatus !== 'detail'" status="warning" content="cancel" @click="handleCancle" />
+        </el-row>
+      </el-card>
+    </el-row>
+    <el-row v-else class="w-noclick-wrapper">
+      <!-- <span class="w-department-header">{{ $t('setting.deartment.organization') }}</span> -->
+      <div class="w-content-wrapper">
+        <ul>
+          <li class="w-department-line">
+            <div>● 点击新建，新建部门信息。</div>
+            <div style="margin: 0; text-indent: 2em">已点击树结构上的部门名称，默认创建为当前部门的下属部门</div>
+            <div style="margin: 0; text-indent: 2em">未点击树结构上的部门名称，则创建为一级部门</div>
+          </li>
+          <li class="w-department-line">● 点击树结构上的部门名称，点击修改按钮，修改部门信息。</li>
+          <li class="w-department-line">
+            <div>● 点击树结构上的部门名称，点击删除按钮，删除部门信息。</div>
+            <div style="text-indent: 2em">当部门下有人员存在时，不允许删除部门信息。</div>
+          </li>
+        </ul>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { reactive, watch, inject } from 'vue';
+import { templateRef } from '@vueuse/core';
+import { clone } from 'xe-utils';
+import to from 'await-to-js';
+import { VXETable } from 'vxe-table';
+import { successMessage, warnMessage } from '@utogether/utils';
+import { useSystemStoreHook } from '../../../store/modules/system';
+import { getServiceApi } from '../../../api';
+
+const data = reactive<IRecord>({
+  record: {},
+  dataList: [],
+  loading: false,
+  dialogFormVisible: false,
+  isChecked: false,
+  dataStatus: ''
+});
+
+const dataDict = useSystemStoreHook().getDataDict;
+const { t } = useI18n();
+const serviceApi = getServiceApi();
+
+const rules = {
+  deptName: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.deptName')}`
+    }
+  ],
+  deptCode: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.deptCode')}`
+    }
+  ],
+  deptType: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.deptType')}`
+    }
+  ]
+};
+
+const active: IRecord = inject('active');
+// const treeList = inject('treeList');
+const scrollPanelChange: IRecord = inject('scrollPanelChange');
+
+const url = '/uums/department';
+
+watch(
+  () => active.value,
+  (newVal, oldVal) => {
+    data.record = active.value;
+    newVal?.id && oldVal?.id && newVal !== oldVal && handleEdit('detail');
+  }
+);
+
+// 新增子类型
+const handleAdd = () => {
+  data.dataStatus = 'add';
+  data.record = {};
+  data.record.parentId = active.value?.id;
+  data.isChecked = false;
+  data.dialogFormVisible = true;
+};
+// 编辑
+const handleEdit = dataStatus => {
+  data.dataStatus = dataStatus;
+  data.record = clone(active.value, true);
+  data.dialogFormVisible = true;
+};
+
+const xForm = templateRef<any>('xForm', null);
+const handleComfirm = () => {
+  xForm.value.validate(async valid => {
+    if (!valid) {
+      const { record, dataStatus } = data;
+      data.loading = true;
+      const [err] =
+        dataStatus === 'add' ? await to(serviceApi.post(url, record)) : await to(serviceApi.put(url, record));
+      data.loading = false;
+      if (!err) {
+        actionComplete();
+      }
+    }
+  });
+};
+
+const handleDelete = async () => {
+  const { record } = data;
+  if (record.children.length) return warnMessage(t('message.deletePartment'));
+  const type = await VXETable.modal.confirm(t('message.tip.del'));
+  if (type === 'confirm') {
+    await serviceApi.delete(url, record);
+    actionComplete();
+  }
+};
+
+const actionComplete = () => {
+  scrollPanelChange.value = true;
+  successMessage(t('message.operateSuccess'));
+  handleClose();
+  // scrollPanelChange.value = false;
+};
+
+const handleCancle = () => {
+  if (data.dataStatus === 'add') {
+    data.dialogFormVisible = false;
+  }
+  data.dataStatus = '';
+};
+
+const handleClose = () => {
+  data.dialogFormVisible = false;
+};
+</script>
+<style lang="scss" scoped>
+.page-content {
+  background-color: #fff;
+
+  .w-departInfo-wrapper {
+    width: 96%;
+    height: 75vh;
+
+    .w-card-wrapper {
+      width: 40%;
+
+      .el-card__header {
+        padding: 10px 20px;
+
+        .w-card-title {
+          position: relative;
+          top: 5px;
+        }
+      }
+    }
+
+    .el-form-item {
+      margin-bottom: 12px;
+    }
+  }
+
+  .w-noclick-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .w-content-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 75vh;
+
+      ul {
+        padding: 24px;
+        border: 1px solid #ccc;
+        border-radius: 10px;
+      }
+    }
+
+    .w-department-header {
+      padding-right: 20px;
+      font-size: 26px;
+      font-weight: bolder;
+      color: #69c;
+    }
+
+    .w-department-line {
+      font-size: 16px;
+      line-height: 35px;
+      color: #999;
+      list-style: none;
+    }
+  }
+}
+</style>