client-base-v5/src/client/OrganizationEditPanel.vue

<template>
  <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>
    <a-select
      v-model:value="clientIdStr"
      show-search
      option-filter-prop="label"
      style="width: 50%; margin-left: 16px"
      placeholder="请选择公司"
      :options="companies.map((item) => ({ value: item.id, label: item.name }))"
      @change="getClientId"
    />
  </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-popconfirm
              title="确定删除吗！"
              ok-text="确定"
              cancel-text="取消"
              @confirm="deleteOrganization(record.key)"
            >
              <a style="color: red">删除</a>
            </a-popconfirm>
          </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>
      <!-- v-if="organization.id" -->
      <a-input 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>
    <template #footer>
      <a-button v-if="isCreate" type="primary" @click="createNew(organization)">
        创建
      </a-button>
      <a-button
        v-else
        type="primary"
        @click="updateOrganization(organization.id)"
      >
        {{ $t("lang.OrganizationEditPanel.save") }}
      </a-button>
    </template>
  </a-drawer>
</template>

<script setup>
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';
import Common from '../common/Common.js';
import { Notify } from 'pc-component-v3';
import { ref, onMounted, getCurrentInstance } from 'vue';

import {
  columns,
  create,
  update,
  getCompony,
  getUsersByName,
  loadOrganization,
  deleteDepartment,
  getAllOrganization,
} from '../api/department/index';
import { message } from 'ant-design-vue';

const clientId = ref(''); //公司id
const id = ref(''); //公司id
const companies = ref([]); //所有公司
const clientIdStr = ref(undefined);
const userList = ref([]); // 用户清单
const isCreate = ref(false); // 是否新建
const dataSource = ref([]); // 表格部门
const drawerTitle = ref(''); //抽屉标题
const organization = ref({}); // 部门详情
const editVisible = ref(false); // 抽屉开关
const organizationId = ref(''); // 所选部门ID
// const clientAdditionHql = ref({});
const clientNameStr = 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(() => {
  getCompony().then(
    success => {
      if (success.errorCode == 0) {
        companies.value = success.datas;
      } else {
        message.error(success.errorMessage);
      }
    },
    err => {
      Common.processException(err);
    },
  );
});

// 获取所选公司id 名字
const getClientId = (value, client) => {
  id.value = value;
  clientId.value = value;
  clientNameStr.value = client.label;
  getOrganization();
};

// 新建部门
const createOrganization = () => {
  organization.value = {};
  organization.value.clientName = clientNameStr.value;
  organization.value.clientName = clientNameStr.value;
  (clientFieldValue.value = {
    displayValue: [],
    fieldType: 'Key',
    id: null,
  }),
  (parentOrganizationFieldValue.value = {
    displayValue: [],
    fieldType: 'Key',
    id: null,
  });
  parentOrganizationAdditionHql.value = '';
};

// 创建按钮
const createNew = organization => {
  organization.parentName = parentOrganizationFieldValue.value.displayValue[0];
  organization.clientId = id.value;
  create(organization).then(
    success => {
      if (success.errorCode == 0) {
        message.success('新建部门成功');
        getOrganization();
        editVisible.value = false;
      } else {
        message.error(success.errorMessage);
      }
    },
    err => {
      Common.processException(err);
    },
  );
};

// 获取所有部门
const getOrganization = () => {
  dataSource.value = [];
  const datas = [];
  const id = clientId.value;
  getAllOrganization(id).then(
    success => {
      if (success.errorCode == 0) {
        success.datas.forEach(item => {
          datas.push(item.childrenOrganizations);
        });
        traversalTree(datas.flat(1), dataSource.value);
      }
      // loadAllSubClients();
    },
    err => {
      Common.processException(err);
    },
  );
};

// 编辑部门
const editOrganization = (flag, id) => {
  organizationId.value = id;
  if (flag) {
    if (clientNameStr.value !== '') {
      editVisible.value = true;
      drawerTitle.value = '新建部门';
      createOrganization();
      fetchUserList();
      isCreate.value = true;
    } else {
      message.warning('请选择公司');
    }
  } else {
    editVisible.value = true;
    drawerTitle.value = '编辑部门';
    loadOrganization(id).then(
      success => {
        if (success.errorCode == 0) {
          organization.value = success.data;
          parentOrganizationFieldValue.value = {
            displayValue: [success.data.parentName],
            fieldType: 'Key',
            id: success.data.parentId,
          };
          clientFieldValue.value = {
            displayValue: [success.data.clientName],
            fieldType: 'Key',
            id: success.data.clientId,
          };
          fetchUserList();
        } else {
          message.error(success.errorMessage);
        }
      },
      err => {
        Common.processException(err);
      },
      (isCreate.value = false),
    );
  }
};

//保存事件
const updateOrganization = () => {
  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;
  }
  update(organizationValue).then(
    success => {
      if (success.errorCode == 0) {
        if (success.data) {
          Notify.success(
            proxy.$t('lang.Notify.success'),
            proxy.$t('lang.OrganizationEditPanel.describe6'),
            true,
          );
          organization.value = {};

          organization.value.clientId = clientFieldValue.value.id;
          parentOrganizationFieldValue.value = {
            displayValue: [],
            fieldType: 'Key',
            id: null,
          };
          getOrganization();
        }
      } else {
        message.error(success.errorMessage);
      }
      editVisible.value = false;
    },
    err => {
      Common.processException(err);
    },
  );
};

// 删除部门
const deleteOrganization = id => {
  loadOrganization(id).then(
    success => {
      const organization = success.data;
      if (organization == undefined) {
        Notify.error(
          proxy.$t('lang.Notify.error'),
          proxy.$t('lang.OrganizationEditPanel.describe4'),
          true,
        );
        return;
      }
      const params = {
        id: organization.id,
        no: organization.no,
        name: organization.name,
      };
      deleteDepartment(params).then(
        success => {
          if (success.errorCode == 0) {
            Notify.success(
              proxy.$t('lang.Notify.success'),
              proxy.$t('lang.OrganizationEditPanel.describe3'),
              true,
            );
            organization.value = undefined;
            getOrganization();
          } else {
            message.error(success.errorMessage);
          }
        },
        err => {
          Common.processException(err);
        },
      );
    },
    err => {
      Common.processException(err);
    },
  );
};

// 部门管理员输入的过滤条件发生改变
const fetchUserList = (search, loading) => {
  if (loading != null) {
    loading(true);
  }
  let searchQueryParam = {
    conditional: search,
    range: {
      start: 0,
      length: 100,
    },
  };
  getUsersByName(searchQueryParam).then(
    successData => {
      if (loading != null) {
        loading(false);
      }
      userList.value = successData.resultList;
    },
    errorData => {
      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; // 添加部门约束
};

// 上级部门change事件
const parentOrganizationValueChanged = newFieldValue => {
  if (organizationId.value == newFieldValue.id) {
    message.warning('不能将自己作为上级部门！');
    parentOrganizationFieldValue.value = {
      displayValue: [],
      fieldType: 'Key',
      id: null,
    };
  } else {
    parentOrganizationFieldValue.value = newFieldValue;
    organization.value.parentId = newFieldValue.id;
    organization.value.parentName = newFieldValue.displayValue[0];
  }
};

// 递归将childrenOrganizations赋值给children
const traversalTree = (array, target) => {
  array.map((item, index) => {
    target.push({
      id: item.id,
      no: item.no,
      key: item.id,
      children: [],
      type: item.type,
      name: item.name,
      description: item.description,
    });
    if (
      item.childrenOrganizations !== null &&
      item.childrenOrganizations.length !== 0
    ) {
      traversalTree(item.childrenOrganizations, target[index].children);
    } else {
      delete target[index].children;
    }
  });
};

// 获取所有子部门
/** 
const loadAllSubClients = () => {
  var rootClientId = null;
  for (let i = 0; i < dataSource.value.length; i++) {
    var clientOrganization = dataSource.value[i];
    if (clientOrganization.children == null) {
      rootClientId = clientOrganization.key;
    }
  }
  loadSubClients(rootClientId).then(
    success => {
      if (success.errorCode == 0) {
        if (success.datas) {
          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',
              },
            ],
          };
        }
      } else {
        message.error(success.errorMessage);
      }
    },
    err => {
      Common.processException(err);
    },
  );
};*/
</script>

<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>