重新自定义部门管理页面

src/api/department/index.js

@@ -0,0 +1,151 @@
+import { Common } from 'pc-component-v3';
+
+export const columns = [
+  {
+    title: '部门名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '部门编号',
+    dataIndex: 'no',
+    key: 'no',
+    width: '50%',
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    fixed: 'right',
+  },
+];
+
+// 保存更新部门
+export const save = organization => {
+  var requestUrl = 'organizationResource/saveOrUpdate';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'post',
+      data: JSON.stringify(organization),
+      contentType: 'application/json; charset=utf-8',
+      processData: false,
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+// 删除部门
+export const deleteDepartment = organization => {
+  var requestUrl = 'organizationResource/delete';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'post',
+      dataType: 'json',
+      data: JSON.stringify(organization),
+      contentType: 'application/json; charset=utf-8',
+      processData: false,
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+// 获取单位部门(刷新)
+export const getAllOrganization = () => {
+  var requestUrl = 'organizationResource/findByClientId';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      dataType: 'json',
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+// 查询所有子部门
+export const loadSubClients = id => {
+  var requestUrl = 'ClientResource/getSubClientIds';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      dataType: 'json',
+      data: { rootClientId: id },
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+// 从服务器加载Organization
+export const loadOrganization = id => {
+  var requestUrl = 'organizationResource/unique?organizationId=' + id;
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiURL(requestUrl),
+      type: 'get',
+      dataType: 'json',
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      processData: false,
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};
+
+export const getUsersByName = searchQueryParam => {
+  var requestUrl = 'api/userResource/getUsersByName';
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      url: Common.getApiUrl2(requestUrl),
+      type: 'post',
+      contentType: 'application/json',
+      data: JSON.stringify(searchQueryParam),
+      beforeSend: function (request) {
+        Common.addTokenToRequest(request);
+      },
+      success: function (data) {
+        resolve(data);
+      },
+      error: function (XMLHttpRequest, textStatus, errorThrown) {
+        reject(XMLHttpRequest);
+      },
+    });
+  });
+};

src/client/OrganizationEditPanel.vue

@@ -1,699 +1,394 @@
 <template>
-  <div class="container">
-    <NavBar
-      :title="$t('lang.OrganizationEditPanel.departmentManagement')"
-      :is-go-back="false"
-    />
-
-    <div class="grid-container">
-      <div class="grid-item-row1-column1">
-        <div>
-          <div>
-            <button
-              class="btn btn-primary"
-              @click="createOrganization()"
-            >
-              {{ $t('lang.OrganizationEditPanel.newDepartment') }}
-            </button>
-            <button
-              class="btn btn-danger"
-              @click="deleteOrganization()"
-            >
-              {{ $t('lang.OrganizationEditPanel.deleteDepartment') }}
-            </button>
-            <button
-              class="btn btn-default"
-              @click="refresh()"
-            >
-              {{ $t('lang.OrganizationEditPanel.refresh') }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-row2-column1">
-        <div
-          v-for="clientOrganization in clientOrganizations"
-          :key="clientOrganization.id"
-        >
-          <TreeViewNode
-            :node="clientOrganization"
-            :is-root="true"
-            :is-show-check="true"
-            @node-expand="nodeExpand"
-            @node-select="nodeSelect"
-          />
-        </div>
-      </div>
-
-      <div class="grid-item-row2-column2">
-        <div>
-          <div v-if="organization">
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.corporateName') }}</label>
-              <input
-                v-if="organization.id"
-                v-model="organization.clientName"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                readonly
-              />
-              <SearchWidget
-                v-else
-                info-window-no="286633"
-                :field-value="clientFieldValue"
-                :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
-                display-name="ct.name"
-                :where-clause-source="clientAdditionHql"
-                @value-changed="clientValueChanged"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.departmentNumber') }}</label>
-              <input
-                v-model="organization.no"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.departmentName') }}</label>
-              <input
-                v-model="organization.name"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.superiorDepartment') }}</label>
-              <SearchWidget
-                info-window-no="20220420_233656"
-                :field-value="parentOrganizationFieldValue"
-                :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
-                display-name="name"
-                :where-clause-source="parentOrganizationAdditionHql"
-                @value-changed="parentOrganizationValueChanged"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.departmentProfile') }}</label>
-              <textarea
-                v-model="organization.description"
-                class="form-control"
-                rows="3"
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.departmentManager') }}</label>
-              <div>
-                <v-select
-                  id="departmentManagerSelect"
-                  v-model="organization.managerUsers"
-                  multiple
-                  label="name"
-                  :options="userList"
-                  @search="fetchUserList"
-                />
-              </div>
-            </div>
+  <header>
+    <h3 style="margin: 0px; padding: 5px 0px 9px 0px">
+      {{ $t("lang.OrganizationEditPanel.departmentManagement") }}
+    </h3>
+    <a-divider style="margin: 0px" />
+  </header>
+  <div style="margin-top: 8px">
+    <a-button type="primary" @click="editOrganization(true)">
+      {{ $t("lang.OrganizationEditPanel.newDepartment") }}
+    </a-button>
+    <a-button type="dashed" style="margin-left: 8px" @click="getOrganization">
+      {{ $t("lang.OrganizationEditPanel.refresh") }}
+    </a-button>
+  </div>
 
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="saveOrUpdate()"
-            >
-              {{ $t('lang.OrganizationEditPanel.save') }}
-            </button>
-          </div>
-        </div>
-        <div>
-          <div v-if="selectedClient && selectedClient.selected">
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.corporateName') }}</label>
-              <div v-if="isInput">
-                <input
-                  v-model="selectedClient.name"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  readonly
-                />
-              </div>
-              <div v-else>
-                <input
-                  v-model="companyName"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                />
-              </div>
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.companyNumber') }}</label>
-              <input
-                v-model="selectedClient.no"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                readonly
-              />
-            </div>
-            <div class="form-group">
-              <label>{{ $t('lang.OrganizationEditPanel.companyManger') }}</label>
-              <div>
-                <v-select
-                  id="companyMangerSelect"
-                  v-model="selectedClient.managerUsers"
-                  multiple
-                  label="name"
-                  :options="userList"
-                  @search="fetchUserList"
-                />
-              </div>
-            </div>
-            <button
-              type="button"
-              class="btn btn-default"
-              @click="edit()"
-            >
-              {{ isInput ? $t('lang.OrganizationEditPanel.edit') : $t('lang.OrganizationEditPanel.cancelEditing') }}
-            </button>
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="updateCompany"
-            >
-              {{ $t('lang.OrganizationEditPanel.save') }}
-            </button>
-          </div>
+  <a-table
+    style="margin-top: 6px"
+    :columns="columns"
+    :data-source="dataSource"
+    :pagination="false"
+    :scroll="{ y: 440 }"
+    filter-search
+  >
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'operation'">
+        <div class="editable-row-operations">
+          <span>
+            <a @click="editOrganization(false, record.key)">{{
+              $t("lang.OrganizationEditPanel.edit")
+            }}</a>
+          </span>
+          <span>
+            <a style="color: red" @click="deleteOrganization(record.key)">删除</a>
+          </span>
         </div>
+      </template>
+    </template>
+  </a-table>
+
+  <a-drawer
+    v-model:visible="editVisible"
+    :title="drawerTitle"
+    :width="500"
+    placement="right"
+  >
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.corporateName") }}</label>
+      <a-input
+        v-if="organization.id"
+        v-model:value="organization.clientName"
+        disabled
+      />
+      <SearchWidget
+        v-else
+        info-window-no="286633"
+        :field-value="clientFieldValue"
+        :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
+        display-name="ct.name"
+        :where-clause-source="clientAdditionHql"
+        @value-changed="clientValueChanged"
+      />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.departmentNumber") }}</label>
+      <a-input v-model:value="organization.no" />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.departmentName") }}</label>
+      <a-input v-model:value="organization.name" />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.superiorDepartment") }}</label>
+      <SearchWidget
+        info-window-no="20220420_233656"
+        :field-value="parentOrganizationFieldValue"
+        :title-name="$t('lang.OrganizationEditPanel.departmentInquiry')"
+        display-name="name"
+        :where-clause-source="parentOrganizationAdditionHql"
+        @value-changed="parentOrganizationValueChanged"
+      />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.departmentProfile") }}</label>
+      <textarea
+        v-model="organization.description"
+        class="form-control"
+        rows="3"
+      />
+    </div>
+    <div class="form-group">
+      <label>{{ $t("lang.OrganizationEditPanel.departmentManager") }}</label>
+      <div>
+        <v-select
+          id="departmentManagerSelect"
+          v-model="organization.managerUsers"
+          multiple
+          label="name"
+          :options="userList"
+          @search="fetchUserList"
+        />
       </div>
     </div>
-  </div>
+    <template #footer>
+      <a-button type="primary" @click="saveOrUpdate(organization.id)">
+        {{ $t("lang.OrganizationEditPanel.save") }}
+      </a-button>
+    </template>
+  </a-drawer>
 </template>
 
-<script>
-import Common from '../common/Common.js';
-
-
-import TreeViewNode from '../widget/TreeViewNode.vue';
-
+<script setup>
 import vSelect from 'vue-select';
-import OrganizationResource from '../api/base/OrganizationResource';
-import UserResource from '../api/base/UserResource.js';
-
 import 'vue-select/dist/vue-select.css';
-import { Notify, Uuid } from 'pc-component-v3';
-
-export default {
-
-  components: {
-    TreeViewNode,
-    vSelect,
-  },
-  data: function () {
-    return {
-      isInput: true,
-      companyName: ' ',
-      clientId: null,
-      clientName: '',
-      selectedClient: undefined, // 选择的公司
-      selectedOrganization: undefined,
-      organization: undefined,
-      clientFieldValue: {
-        displayValue: [],
-        fieldType: 'Key',
-        id: null,
-      },
-      parentOrganizationFieldValue: {
-        displayValue: [],
-        fieldType: 'Key',
-        id: null,
-      },
-      //clientAdditionHql: "id IN (SELECT client.id FROM com.leanwo.prodog.model.base.Organization WHERE id IN (:EnvOrganizationIdList))",
-      //parentOrganizationAdditionHql: "id IN (:EnvOrganizationIdList)",
-      clientAdditionHql: '',
-      parentOrganizationAdditionHql: '',
-      // 其是树形结构
-      clientOrganizations: [],
-      subClienIds: [],
-      // 用户清单
-      userList: [],
-      expandClientIds: [],        // 展开的公司节点id
-      expandOrganizationIds: [],  // 展开的部门节点id
-    };
-  },
-
-  mounted: function () {
-    this.getClientOrganization();
-  },
-
-  methods: {
-    createOrganization: function () {
-      var _self = this;
-      this.organization = {};
-      (this.clientFieldValue = {
-        displayValue: [],
-        fieldType: 'Key',
-        id: null,
-      }),
-      (this.parentOrganizationFieldValue = {
-        displayValue: [],
-        fieldType: 'Key',
-        id: null,
-      });
+import Common from '../common/Common.js';
+import { Notify } from 'pc-component-v3';
+import { ref, onMounted, getCurrentInstance } from 'vue';
+
+import {
+  columns,
+  getAllOrganization,
+  loadOrganization,
+  loadSubClients,
+  getUsersByName,
+  deleteDepartment,
+  save,
+} from '../api/department/index';
+
+const userList = ref([]); // 用户清单
+const dataSource = ref([]); // 表格部门
+const drawerTitle = ref(''); //抽屉标题
+const organization = ref({}); // 部门详情
+const editVisible = ref(false); // 抽屉开关
+const clientAdditionHql = ref('');
+const { proxy } = getCurrentInstance(); //访问this
+const parentOrganizationAdditionHql = ref('');
+const parentOrganizationFieldValue = ref({
+  displayValue: [],
+  fieldType: 'Key',
+  id: null,
+});
+const clientFieldValue = ref({
+  displayValue: [],
+  fieldType: 'Key',
+  id: null,
+});
+onMounted(() => {
+  getOrganization();
+});
+
+// 新建部门
+const createOrganization = () => {
+  organization.value = {};
+  (clientFieldValue.value = {
+    displayValue: [],
+    fieldType: 'Key',
+    id: null,
+  }),
+  (parentOrganizationFieldValue.value = {
+    displayValue: [],
+    fieldType: 'Key',
+    id: null,
+  });
+  parentOrganizationAdditionHql.value = '';
+};
 
-      // 新建的时候取消已经勾选的单位或部门
-      if (this.selectedClient != undefined) {
-        this.selectedClient.selected = false;
+// 获取所有部门
+const getOrganization = () => {
+  dataSource.value = [];
+  getAllOrganization().then(
+    success => {
+      if (success.errorCode == 0) {
+        traversalTree(success.datas, dataSource.value);
       }
-      if (this.selectedOrganization != undefined) {
-        this.selectedOrganization.selected = false;
-      }
-
-      this.parentOrganizationAdditionHql = '';
+      loadAllSubClients();
     },
-
-    saveOrUpdate: function () {
-      var _self = this;
-      if (
-        _self.organization.clientId == undefined ||
-                _self.organization.clientId == '' ||
-                _self.organization.name == undefined ||
-                _self.organization.name == '' ||
-                _self.organization.no == undefined ||
-                _self.organization.no == ''
-      ) {
-        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe5'), true);
-        return;
-      }
-
-      $.ajax({
-        url: Common.getApiURL('organizationResource/saveOrUpdate'),
-        type: 'post',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        data: JSON.stringify(_self.organization),
-        contentType: 'application/json; charset=utf-8',
-        processData: false,
-        success: function (data) {
-          Notify.success(_self.$t('lang.Notify.success'), _self.$t('lang.OrganizationEditPanel.describe6'), true);
-          _self.organization = {};
-
-          _self.organization.clientId = _self.clientFieldValue.id;
-          _self.parentOrganizationFieldValue = {
-            displayValue: [],
-            fieldType: 'Key',
-            id: null,
-          };
-
-          if(data.parentId != null){
-            _self.expandOrganizationIds.push(data.parentId);
-          }
-                    
-          _self.expandOrganizationIds.push(data.id);
-
-          _self.refresh();
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
+    err => {
+      Common.processException(err);
     },
+  );
+};
 
-    deleteOrganization: function () {
-      var _self = this;
-      if (_self.organization == undefined) {
-        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe4'), true);
-        return;
+// 获取所有子部门
+const loadAllSubClients = () => {
+  var rootClientId = null;
+  for (let index = 0; index < dataSource.value.length; index++) {
+    var clientOrganization = dataSource.value[index];
+    if (clientOrganization.children == null) {
+      rootClientId = clientOrganization.id;
+    }
+  }
+  loadSubClients(rootClientId).then(
+    success => {
+      if (success) {
+        clientAdditionHql.value = ' ct.id in (' + success.join(',') + ')';
+      } else {
+        clientAdditionHql.value = {
+          customerDataDimensions: [
+            {
+              fieldName: 'ct.id',
+              dataDimensionTypeNo: '202201191757',
+              defaultDataDimensionTypeValueNo: '1',
+            },
+          ],
+        };
+        parentOrganizationAdditionHql.value = {
+          customerDataDimensions: [
+            {
+              fieldName: 'organization.id',
+              dataDimensionTypeNo: '202201191700',
+              defaultDataDimensionTypeValueNo: '1',
+            },
+          ],
+        };
       }
-      $.ajax({
-        url: Common.getApiURL('organizationResource/delete'),
-        type: 'post',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        data: JSON.stringify(_self.organization),
-        contentType: 'application/json; charset=utf-8',
-        processData: false,
-        success: function (data) {
-          Notify.success(_self.$t('lang.Notify.success'), _self.$t('lang.OrganizationEditPanel.describe3'), true);
-          _self.organization = undefined;
-          _self.refresh();
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
     },
-
-    /**
-         * 刷新
-         */
-    refresh: function () {
-      this.getClientOrganization();
+    err => {
+      Common.processException(err);
     },
+  );
+};
 
-    /**
-         * 单位发生修改
-         */
-    clientValueChanged: function (newFieldValue) {
-      var _self = this;
-      _self.clientFieldValue = newFieldValue;
-      _self.organization.clientId = newFieldValue.id;
+// 编辑部门
+const editOrganization = (flag, id) => {
+  editVisible.value = true;
+  if (flag) {
+    drawerTitle.value = '新建部门';
+    createOrganization();
+    fetchUserList();
+  } else {
+    drawerTitle.value = '编辑部门';
+    loadOrganization(id).then(
+      success => {
+        organization.value = success;
+        parentOrganizationFieldValue.value = {
+          displayValue: [success.parentName],
+          fieldType: 'Key',
+          id: success.parentId,
+        };
+        clientFieldValue.value = {
+          displayValue: [success.clientName],
+          fieldType: 'Key',
+          id: success.clientId,
+        };
+        fetchUserList();
+      },
+      err => {
+        Common.processException(err);
+      },
+    );
+  }
+};
 
-      // 添加部门约束
-      _self.parentOrganizationAdditionHql = ' client.id = ' + newFieldValue.id;
-    },
+//保存事件
+const saveOrUpdate = () => {
+  const organizationValue = JSON.parse(JSON.stringify(organization.value));
+  const { clientId, name, no } = organizationValue;
+  if (
+    clientId == undefined ||
+    clientId == '' ||
+    name == undefined ||
+    name == '' ||
+    no == undefined ||
+    no == ''
+  ) {
+    Notify.error(
+      proxy.$t('lang.Notify.error'),
+      proxy.$t('lang.OrganizationEditPanel.describe5'),
+      true,
+    );
+    return;
+  }
+  save(organizationValue).then(
+    success => {
+      Notify.success(
+        proxy.$t('lang.Notify.success'),
+        proxy.$t('lang.OrganizationEditPanel.describe6'),
+        true,
+      );
+      organization.value = {};
 
-    /**
-     * 上级部门发生修改
-     */
-    parentOrganizationValueChanged: function (newFieldValue) {
-      var _self = this;
-      _self.parentOrganizationFieldValue = newFieldValue;
-      _self.organization.parentId = newFieldValue.id;
+      organization.value.clientId = clientFieldValue.value.id;
+      parentOrganizationFieldValue.value = {
+        displayValue: [],
+        fieldType: 'Key',
+        id: null,
+      };
+      getOrganization();
+      editVisible.value = false;
     },
-
-    // 节点打开事件
-    nodeExpand: function (node) {
-      var _self = this;
-      console.log(node);
-      if (node.open === true) {
-        if (node.isClient) {
-          _self.expandClientIds.push(node.id);
-        } else {
-          _self.expandOrganizationIds.push(node.id);
-        }
-      } else {
-        if (node.isClient) {
-          let index = _self.expandClientIds.indexOf(node.id);
-          if(index >= 0){
-            _self.expandClientIds.splice(index, 1);
-          }
-        } else {
-          let index = _self.expandOrganizationIds.indexOf(node.id);
-          if(index >= 0){
-            _self.expandOrganizationIds.splice(index, 1);
-          }
-        }
-      }
-
+    err => {
+      Common.processException(err);
     },
+  );
+};
 
-    // 节点选择事件
-    nodeSelect: function (node) {
-      var _self = this;
-
-      var nodeSelectStatus = node.selected;
-
-      if (_self.selectedClient != undefined) {
-        _self.selectedClient.selected = false;
-      }
-
-      if (_self.selectedOrganization != undefined) {
-        _self.selectedOrganization.selected = false;
-      }
-
-      // 如果选择的是单位
-      if (node.isClient == true) {
-        console.log(node);
-        _self.selectedClient = node;
-        _self.selectedOrganization = undefined;
-        _self.organization = undefined;
-        _self.parentOrganizationFieldValue = undefined;
-        _self.clientFieldValue = undefined;
-      } else {
-        // 如果选择的是部门
-        _self.selectedClient = undefined;
-        _self.organization = undefined;
-        _self.parentOrganizationFieldValue = undefined;
-        _self.clientFieldValue = undefined;
-        _self.selectedOrganization = node;
-        _self.loadOrganization(node.id);
-
+// 删除部门
+const deleteOrganization = id => {
+  loadOrganization(id).then(
+    success => {
+      const organization = success;
+      if (organization == undefined) {
+        Notify.error(
+          proxy.$t('lang.Notify.error'),
+          proxy.$t('lang.OrganizationEditPanel.describe4'),
+          true,
+        );
+        return;
       }
-
-      node.selected = !nodeSelectStatus;
-
-
-    },
-
-    // 获取单位部门
-    getClientOrganization: function () {
-      var _self = this;
-      $.ajax({
-        type: 'get',
-        dataType: 'json',
-        url: Common.getApiURL('organizationResource/findByClientId'),
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        success: function (data) {
-          // console.log(data);
-          if(data.errorCode != 0){
-            Notify.error(_self.$t('lang.OrganizationEditPanel.describe2'), data.errorCode, false);
-            return;
-          }
-          function setOpen(node) {
-            node.open = false;
-            node.selected = false;
-            node.isShowCheck = true;
-            node.text = node.no + ' ' + node.name;
-            if (node.isClient) {
-              if (_self.expandClientIds.indexOf(node.id) >= 0) {
-                node.open = true;
-              };
-            } else {
-              if (_self.expandOrganizationIds.indexOf(node.id) >= 0) {
-                node.open = true;
-              };
-            }
-            if (
-              node.childrenDatas != undefined &&
-                            node.childrenDatas.length > 0
-            ) {
-              node.childrenDatas.forEach(function (item) {
-                setOpen(item);
-              });
-            }
-          }
-          data.datas.forEach(function (item) {
-            setOpen(item);
-          });
-          _self.clientOrganizations = data.datas;
-          // 查询所有子部门
-          _self.loadSubClients();
+      deleteDepartment(organization).then(
+        success => {
+          Notify.success(
+            proxy.$t('lang.Notify.success'),
+            proxy.$t('lang.OrganizationEditPanel.describe3'),
+            true,
+          );
+          organization.value = undefined;
+          getOrganization();
         },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        err => {
+          Common.processException(err);
         },
-      });
+      );
     },
-
-    // 从服务器加载Organization
-    loadOrganization: function (id) {
-      var _self = this;
-      $.ajax({
-        url: Common.getApiURL('organizationResource/unique') +
-                    '?organizationId=' +
-                    id,
-        type: 'get',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        processData: false,
-        success: function (data) {
-          _self.organization = data;
-          _self.parentOrganizationFieldValue = {
-            displayValue: [data.parentName],
-            fieldType: 'Key',
-            id: data.parentId,
-          };
-          _self.clientFieldValue = {
-            displayValue: [data.clientName],
-            fieldType: 'Key',
-            id: data.clientId,
-          };
-
-
-          //_self.userList.splice(0, _self.userList.length);
-          _self.fetchUserList();
-          // 添加到下拉菜单中
-          // if(_self.organization != null && _self.organization.managerUsers != null){
-          //     _self.organization.managerUsers.forEach(item => {
-          //         _self.$set(_self.userList, _self.userList.length, item);
-          //     });                    
-          // }
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
+    err => {
+      Common.processException(err);
     },
+  );
+};
 
-    loadSubClients: function () {
-      var _self = this;
-      var rootClientId = null;
-      for (let index = 0; index < _self.clientOrganizations.length; index++) {
-        var clientOrganization = _self.clientOrganizations[index];
-        if (clientOrganization.childrenDatas == null) {
-          rootClientId = clientOrganization.id;
-        }
-      }
-      $.ajax({
-        url: Common.getApiURL('ClientResource/getSubClientIds'),
-        type: 'get',
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
-        },
-        data: {
-          rootClientId: rootClientId,
-        },
-        success: function (data) {
-          if (data) {
-            data.push(rootClientId);
-            _self.subClienIds = data;
-            _self.clientAdditionHql = ' ct.id in (' + data.join(',') + ')';
-          } else {
-            // buy find by jack
-            _self.clientAdditionHql = {
-              customerDataDimensions:[{
-                fieldName: 'ct.id',
-                dataDimensionTypeNo: '202201191757',
-                defaultDataDimensionTypeValueNo: '1',
-              }],
-            };
-            // 'id IN (SELECT client.id FROM com.leanwo.prodog.model.base.Organization WHERE id IN (:EnvOrganizationIdList))';
-            _self.parentOrganizationAdditionHql = {
-              customerDataDimensions:[{
-                fieldName: 'organization.id',
-                dataDimensionTypeNo: '202201191700',
-                defaultDataDimensionTypeValueNo: '1',
-              }],
-            };
-          }
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
-        },
-      });
+// 部门管理员输入的过滤条件发生改变
+const fetchUserList = (search, loading) => {
+  if (loading != null) {
+    loading(true);
+  }
+  let searchQueryParam = {
+    conditional: search,
+    range: {
+      start: 0,
+      length: 100,
     },
-    /**
-         * 修改公司
-         */
-    updateCompany: function () {
-      var _self = this;
-      if (
-        _self.selectedClient != null &&
-                _self.companyName != null &&
-                _self.companyName.length != 0
-      ) {
-        _self.selectedClient.name = _self.companyName;
-      } else {
-        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.OrganizationEditPanel.describe1'));
-        return;
-      }
-      OrganizationResource.update(_self.selectedClient).then(
-        successData => {
-          _self.isInput = true;
-          _self.refresh();
-          Notify.success(_self.$t('lang.Notify.prompt'), successData.message);
-        },
-        errorData => { },
-      );
-    },
-    /**
-         * 编辑/取消编辑
-         */
-    edit: function () {
-      var _self = this;
-      if (_self.isInput) {
-        _self.companyName = _self.selectedClient.name;
-      } else {
-        _self.companyName = null;
+  };
+  getUsersByName(searchQueryParam).then(
+    successData => {
+      if (loading != null) {
+        loading(false);
       }
-      _self.isInput = !_self.isInput;
+      userList.value = successData.resultList;
     },
-
-    /**
-         * 输入的过滤条件发生改变
-         * Triggered when the search text changes.
-        *
-        * @param search  {String}    Current search text
-        * @param loading {Function}	Toggle loading class
-         */
-    fetchUserList: function (search, loading) {
-      let _self = this;
+    errorData => {
       if (loading != null) {
-        loading(true);
+        loading(false);
       }
 
-      let searchQueryParam = {
-        conditional: search,
-        range: {
-          start: 0,
-          length: 100,
-        },
-      };
-
-      UserResource.getUsersByName(searchQueryParam).then(successData => {
-        if (loading != null) {
-          loading(false);
-        }
+      Common.processException(errorData);
+    },
+  );
+};
+// 公司change事件
+const clientValueChanged = newFieldValue => {
+  clientFieldValue.value = newFieldValue;
+  organization.value.clientId = newFieldValue.id;
+  parentOrganizationAdditionHql.value = ' client.id = ' + newFieldValue.id; // 添加部门约束
+};
 
-        _self.userList = successData.resultList;
-      }, errorData => {
-        if (loading != null) {
-          loading(false);
-        }
+// 上级部门change事件
+const parentOrganizationValueChanged = newFieldValue => {
+  parentOrganizationFieldValue.value = newFieldValue;
+  organization.value.parentId = newFieldValue.id;
+};
 
-        Common.processException(errorData);
-      });
-    },
-  },
+// 递归将childrenDatas赋值给children
+const traversalTree = (array, target) => {
+  array.map((item, index) => {
+    target.push({
+      key: item.id,
+      name: item.name,
+      no: item.no,
+      children: [],
+    });
+    if (item.childrenDatas.length !== 0) {
+      traversalTree(item.childrenDatas, target[index].children);
+    } else {
+      delete target[index].children;
+    }
+  });
 };
 </script>
 
 <style scoped>
-.grid-container {
-    margin-top: 10px;
-    display: grid;
-    grid-template-columns: 400px auto;
-    grid-template-rows: 35px auto;
-    gap: 10px;
-    justify-items: stretch;
-    align-items: stretch;
-    height: calc(100vh - 170px);
-    overflow: auto;
-}
-
-.grid-item-row1-column1 {
-    grid-row-start: 1;
-    grid-row-end: 2;
-    grid-column-start: 1;
-    grid-column-end: 3;
-}
-
-.grid-item-row2-column1 {
-    grid-row-start: 2;
-    grid-row-end: 3;
-    grid-column-start: 1;
-    grid-column-end: 2;
-    overflow: auto;
-    border: 1px solid #e1e1e8;
-    padding: 0px 10px 0px 10px;
-}
-
-.grid-item-row2-column2 {
-    grid-row-start: 2;
-    grid-row-end: 3;
-    grid-column-start: 2;
-    grid-column-end: 3;
-    overflow: auto;
+.editable-row-operations a {
+  margin-right: 8px;
 }
-</style>
+</style>