@utogether/udp-core 1.0.1-beta.16 → 1.0.1-beta.18

package/src/views/organization/company/CompanyPanel.vue

@@ -1,259 +1,259 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-11-19 21:14:41
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-08 15:48:36
- * @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"
-      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="80px">
-            <vxe-form-item
-              :title="$t('message.udp.unitName')"
-              field="unitName"
-              :item-render="{ name: '$input', props: { disabled: data.dataStatus === 'detail' } }"
-              :span="24"
-            />
-            <vxe-form-item
-              :title="$t('message.udp.unitCode')"
-              field="unitCode"
-              :item-render="{ name: '$input', props: { disabled: data.dataStatus !== 'add' } }"
-              :span="24"
-            />
-            <vxe-form-item
-              :title="$t('message.udp.unitNote')"
-              field="unitNote"
-              :item-render="{ name: '$input', 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
-          >
-          <vxe-button
-            v-if="data.dataStatus !== 'detail'"
-            status="primary"
-            :content="$t('message.btn.confirm')"
-            @click="handleComfirm"
-          />
-          <vxe-button
-            v-if="data.dataStatus !== 'detail'"
-            status="warning"
-            :content="$t('message.btn.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 { VxeUI } from 'vxe-table';
-import { templateRef } from '@vueuse/core';
-import { clone } from 'xe-utils';
-import { successMessage, warnMessage } from '@utogether/utils';
-import { getServiceApi } from '../../../api';
-
-const data = reactive<IRecord>({
-  record: {},
-  dataList: [],
-  submitLoading: false,
-  dialogFormVisible: false,
-  isChecked: false,
-  dataStatus: ''
-});
-const { t } = useI18n();
-const rules = {
-  unitName: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.udp.unitName')}`
-    }
-  ],
-  unitCode: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.udp.unitCode')}`
-    }
-  ]
-};
-
-const active: IRecord = inject('active');
-const scrollPanelChange: IRecord = inject('scrollPanelChange');
-
-const serviceApi = getServiceApi();
-const url = '/uums/unit';
-
-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;
-      if (dataStatus === 'add') {
-        await serviceApi.post(url, record);
-      } else {
-        await serviceApi.put(url, record);
-      }
-      actionComplete();
-    }
-  });
-};
-
-const handleDelete = async () => {
-  const { record } = data;
-  if (record.children?.length) return warnMessage(t('message.deletePartment'));
-  const type = await VxeUI.modal.confirm(t('message.tip.del', { msg: 'aaaaa' }));
-  if (type === 'confirm') {
-    await serviceApi.delete(url, record);
-    actionComplete();
-  }
-};
-
-const actionComplete = () => {
-  scrollPanelChange.value = true;
-  successMessage(t('message.operateSuccess'));
-  handleClose();
-};
-
-const handleCancle = () => {
-  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-19 21:14:41
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-08 15:48:36
+ * @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"
+      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="80px">
+            <vxe-form-item
+              :title="$t('message.udp.unitName')"
+              field="unitName"
+              :item-render="{ name: '$input', props: { disabled: data.dataStatus === 'detail' } }"
+              :span="24"
+            />
+            <vxe-form-item
+              :title="$t('message.udp.unitCode')"
+              field="unitCode"
+              :item-render="{ name: '$input', props: { disabled: data.dataStatus !== 'add' } }"
+              :span="24"
+            />
+            <vxe-form-item
+              :title="$t('message.udp.unitNote')"
+              field="unitNote"
+              :item-render="{ name: '$input', 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
+          >
+          <vxe-button
+            v-if="data.dataStatus !== 'detail'"
+            status="primary"
+            :content="$t('message.btn.confirm')"
+            @click="handleComfirm"
+          />
+          <vxe-button
+            v-if="data.dataStatus !== 'detail'"
+            status="warning"
+            :content="$t('message.btn.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 { VxeUI } from 'vxe-table';
+import { templateRef } from '@vueuse/core';
+import { clone } from 'xe-utils';
+import { successMessage, warnMessage } from '@utogether/utils';
+import { getServiceApi } from '../../../api';
+
+const data = reactive<IRecord>({
+  record: {},
+  dataList: [],
+  submitLoading: false,
+  dialogFormVisible: false,
+  isChecked: false,
+  dataStatus: ''
+});
+const { t } = useI18n();
+const rules = {
+  unitName: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.udp.unitName')}`
+    }
+  ],
+  unitCode: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.udp.unitCode')}`
+    }
+  ]
+};
+
+const active: IRecord = inject('active');
+const scrollPanelChange: IRecord = inject('scrollPanelChange');
+
+const serviceApi = getServiceApi();
+const url = '/uums/unit';
+
+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;
+      if (dataStatus === 'add') {
+        await serviceApi.post(url, record);
+      } else {
+        await serviceApi.put(url, record);
+      }
+      actionComplete();
+    }
+  });
+};
+
+const handleDelete = async () => {
+  const { record } = data;
+  if (record.children?.length) return warnMessage(t('message.deletePartment'));
+  const type = await VxeUI.modal.confirm(t('message.tip.del', { msg: 'aaaaa' }));
+  if (type === 'confirm') {
+    await serviceApi.delete(url, record);
+    actionComplete();
+  }
+};
+
+const actionComplete = () => {
+  scrollPanelChange.value = true;
+  successMessage(t('message.operateSuccess'));
+  handleClose();
+};
+
+const handleCancle = () => {
+  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>