版本更新至2.11.5

Ben Lin

2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25

 src/views/tigerprojects/system/usergroups/UserGPDrawer.vue

@@ -1,262 +1,265 @@
<!--
 * @Description: 用户到用户组/角色到用户组 穿棱框
 * @Author: Ben Li
 * @version: 
 * @Date: 2024-03-24 11:16:48
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-18 10:52:48
-->
<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="700px"
    @ok="handleSubmit"
  >
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="700px" @ok="handleSubmit">
    <div class="transfer-wrapper">
      <Transfer
        ref="transferRef"
        :data-source="dataSource"
        :target-keys="targetKeys"
        :left-columns="leftColumns"
        :right-columns="rightColumns"
        :titles="titles"
        @change-keys="onChange"
      />
      <Transfer ref="transferRef" :data-source="dataSource" :target-keys="targetKeys" :left-columns="leftColumns"
        :right-columns="rightColumns" :titles="titles" @change-keys="onChange" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, toRefs, toRef } from 'vue';
  // import { BasicForm, useForm } from '/@/components/Form/index';
  // import { formSchema } from './usergroup.data';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Transfer } from '/@/components/Transfer/index';
  import { TransferData } from '/@/components/Transfer/src/types/transfer';
  import { useTransfer } from '/@/components/Transfer/src/hooks/useTransfer';
  import { getUser, getTargetUser, SetSysUserToGroup } from '/@/api/tigerapi/usergroup';
  import { SpecificEntity, UserGPParams } from '/@/api/tigerapi/model/systemModel';
  import { useUserStore } from '/@/store/modules/user';
  import { notification } from 'ant-design-vue';
  import { getRoles, getTargetRole, SetRoleToGroup } from '/@/api/tigerapi/system';
import { defineComponent, ref, computed, unref, toRefs, toRef } from 'vue';
// import { BasicForm, useForm } from '/@/components/Form/index';
// import { formSchema } from './usergroup.data';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { Transfer } from '/@/components/Transfer/index';
import { TransferData } from '/@/components/Transfer/src/types/transfer';
import { useTransfer } from '/@/components/Transfer/src/hooks/useTransfer';
import { getUser, getTargetUser, SetSysUserToGroup } from '/@/api/tigerapi/usergroup';
import { SpecificEntity, UserGPParams } from '/@/api/tigerapi/model/systemModel';
import { useUserStore } from '/@/store/modules/user';
import { notification } from 'ant-design-vue';
import { getRoles, getTargetRole, SetRoleToGroup } from '/@/api/tigerapi/system';

  export default defineComponent({
    name: 'UserGPDrawer',
    components: { BasicDrawer, Transfer },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const isUpdate = ref(true);
      const isRole = ref(true);
      // const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
      //   labelWidth: 100,
      //   schemas: formSchema,
      //   showActionButtonGroup: false,
      //   baseColProps: { lg: 12, md: 24 },
      // });
export default defineComponent({
  name: 'UserGPDrawer',
  components: { BasicDrawer, Transfer },
  emits: ['success', 'register'],
  setup(_, { emit }) {
    const isUpdate = ref(true);
    const isRole = ref(true);
    // const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
    //   labelWidth: 100,
    //   schemas: formSchema,
    //   showActionButtonGroup: false,
    //   baseColProps: { lg: 12, md: 24 },
    // });

      const transferData = ref<TransferData[]>([]);
      const originTargetKeys = ref<string[]>([]);
      const leftTableColumns = ref([
        {
          dataIndex: 'title',
          title: '用户代码',
        },
        {
          dataIndex: 'description',
          title: '用户名',
        },
      ]);
      const rightTableColumns = ref([
        {
          dataIndex: 'title',
          title: '用户代码',
        },
        {
          dataIndex: 'description',
          title: '用户名',
        },
      ]);
      const titles = ['（用户）', '（用户组）'];
      const userStore = useUserStore();
      //穿梭框props加载，初始化
      const { state, onChange, seDatas } = useTransfer({
        transferRef: undefined,
        dataSource: [],
        editKey: [],
        leftColumns: [],
        rightColumns: [],
        titles: titles,
      });
      const _gpTid = ref('');
      const getTitle = ref('添加用户到用户组');
      //侧边弹出框
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        setDrawerProps({ confirmLoading: false });
    const transferData = ref<TransferData[]>([]);
    const originTargetKeys = ref<string[]>([]);
    const leftTableColumns = ref([
      {
        dataIndex: 'title',
        title: '用户代码',
      },
      {
        dataIndex: 'description',
        title: '用户名',
      },
    ]);
    const rightTableColumns = ref([
      {
        dataIndex: 'title',
        title: '用户代码',
      },
      {
        dataIndex: 'description',
        title: '用户名',
      },
    ]);
    const titles = ['（用户）', '（用户组）'];
    const userStore = useUserStore();
    //穿梭框props加载，初始化
    const { state, onChange, seDatas } = useTransfer({
      transferRef: undefined,
      dataSource: [],
      editKey: [],
      leftColumns: [],
      rightColumns: [],
      titles: titles,
    });
    const _gpTid = ref('');
    const getTitle = ref('添加用户到用户组');

        transferData.value = [];
        var _v: UserGPParams = {
          USERGROUP_CODE: data.record.USERGROUP_CODE,
          USERGROUP_DESC: data.record.USERGROUP_DESC,
        };
        _gpTid.value = data.record.ID;
        isRole.value = !!data?.isRole;
        getTitle.value = unref(isRole) ? '添加角色到用户组' : '添加用户到用户组';
        var _title = ['（用户）', `（用户组:[${data.record.USERGROUP_CODE}]关联的用户）`];
        if (unref(isRole)) {
          ///添加角色功能
          _title = ['（角色）', `（用户组:[${data.record.USERGROUP_CODE}]关联的角色）`];
          leftTableColumns.value = [
            {
              dataIndex: 'title',
              title: '角色代码',
            },
            {
              dataIndex: 'description',
              title: '角色名',
            },
          ];
          rightTableColumns.value = [
            {
              dataIndex: 'title',
              title: '角色代码',
            },
            {
              dataIndex: 'description',
              title: '角色名',
            },
          ];
          getRoles().then((action) => {
            for (let i = 0; i < action.length; i++) {
              transferData.value.push({
                key: action[i].ROLE_CODE,
                title: `${action[i].ROLE_CODE}`,
                description: `${action[i].ROLE_DESC}`,
                disabled: false,
              });
            }
            getTargetRole(_v).then((action) => {
              originTargetKeys.value = [];
              for (let i = 0; i < action.length; i++) {
                originTargetKeys.value.push(action[i].ROLE_CODE);
              }
              //Transfer组件，标题及数据源设置
              seDatas(
                _title,
                unref(transferData),
                unref(originTargetKeys),
                unref(rightTableColumns),
                unref(leftTableColumns),
              );
            });
          });
        } else {
          ///添加用户功能
          rightTableColumns.value = [
            {
              dataIndex: 'title',
              title: '用户代码',
            },
            {
              dataIndex: 'description',
              title: '用户名',
            },
          ];
          leftTableColumns.value = [
            {
              dataIndex: 'title',
              title: '用户代码',
            },
            {
              dataIndex: 'description',
              title: '用户名',
            },
          ];
          ///获取左侧用户列表数据
          getUser().then((action) => {
            for (let i = 0; i < action.length; i++) {
              transferData.value.push({
                key: action[i].USER_ID,
                title: `${action[i].USER_ID}`,
                description: `${action[i].USER_NAME}`,
                disabled: false, //i % 4 === 0,
              });
            }
            ///END　获取左侧用户列表数据
    /**
     * @description: 侧边弹出框初始化方法
     * @return {*}
     */    
    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
      setDrawerProps({ confirmLoading: false });

            ///获取右侧用户组中的用户列表数据，获取完数据给Transfer组件设置数据源
            getTargetUser(_v).then((action) => {
              originTargetKeys.value = [];
              for (let i = 0; i < action.length; i++) {
                originTargetKeys.value.push(action[i].USER_ID);
              }
              //Transfer组件，标题及数据源设置
              seDatas(
                _title,
                unref(transferData),
                unref(originTargetKeys),
                unref(rightTableColumns),
                unref(leftTableColumns),
              );
            });
            ///END　获取右侧用户组中的用户列表数据
          });
        }
      });

      function handleCreate() {
        console.log('list', 11);
      }

      // const getTitle = computed(() => '添加用户到用户组');

      async function handleSubmit() {
        try {
          //const values = await validate();
          setDrawerProps({ confirmLoading: true });
          // TODO custom api
          const _targetKeys = toRef(state, 'targetKeys');
          var _v: SpecificEntity = {
            ID: '',
            EntityStr: '',
            UserId: userStore.getUserInfo.userId,
            Extend1: _targetKeys.value.join(','),
            Extend2: _gpTid.value,
            Extend3: '',
          };
          if (unref(isRole)) {
            SetRoleToGroup(_v).then((action) => {
              if (action.IsSuccessed) {
                notification['success']({
                  message: '操作成功',
                  description: `向用户组添加角色：${_v.Extend1} 成功，${userStore.getUserInfo.userId}`,
                });
                emit('success');
              }
            });
          } else {
            _v.Extend2 = _targetKeys.value.join(',');
            _v.Extend3 = _gpTid.value;
            SetSysUserToGroup(_v).then((action) => {
              if (action.IsSuccessed) {
                notification['success']({
                  message: '操作成功',
                  description: `向用户组添加用户：${_v.Extend2} 成功，${userStore.getUserInfo.userId}`,
                });
                emit('success');
              }
      transferData.value = [];
      var _v: UserGPParams = {
        USERGROUP_CODE: data.record.USERGROUP_CODE,
        USERGROUP_DESC: data.record.USERGROUP_DESC,
      };
      _gpTid.value = data.record.ID;
      isRole.value = !!data?.isRole;
      getTitle.value = unref(isRole) ? '添加角色到用户组' : '添加用户到用户组';
      var _title = ['（用户）', `（用户组:[${data.record.USERGROUP_CODE}]关联的用户）`];
      if (unref(isRole)) {
        ///添加角色功能
        _title = ['（角色）', `（用户组:[${data.record.USERGROUP_CODE}]关联的角色）`];
        leftTableColumns.value = [
          {
            dataIndex: 'title',
            title: '角色代码',
          },
          {
            dataIndex: 'description',
            title: '角色名',
          },
        ];
        rightTableColumns.value = [
          {
            dataIndex: 'title',
            title: '角色代码',
          },
          {
            dataIndex: 'description',
            title: '角色名',
          },
        ];
        /* 多异步方法组合调用 */
        Promise.all([getRoles(), getTargetRole(_v)]).then(res => {
          let action = res[0];
          let tAction = res[1];
          for (let i = 0; i < action.length; i++) {
            transferData.value.push({
              key: action[i].ROLE_CODE,
              title: `${action[i].ROLE_CODE}`,
              description: `${action[i].ROLE_DESC}`,
              disabled: false,
            });
          }

          closeDrawer();
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
          originTargetKeys.value = [];
            for (let i = 0; i < tAction.length; i++) {
              originTargetKeys.value.push(tAction[i].ROLE_CODE);
            }
            //Transfer组件，标题及数据源设置
            seDatas(
              _title,
              unref(transferData),
              unref(originTargetKeys),
              unref(rightTableColumns),
              unref(leftTableColumns),
            );
        }).catch(err => {
          console.log(err)
        });
      } else {
        ///添加用户功能
        rightTableColumns.value = [
          {
            dataIndex: 'title',
            title: '用户代码',
          },
          {
            dataIndex: 'description',
            title: '用户名',
          },
        ];
        leftTableColumns.value = [
          {
            dataIndex: 'title',
            title: '用户代码',
          },
          {
            dataIndex: 'description',
            title: '用户名',
          },
        ];
        Promise.all([getUser(), getTargetUser(_v)]).then(res => {
          let action = res[0];
          let tAction = res[1];
          for (let i = 0; i < action.length; i++) {
            transferData.value.push({
              key: action[i].USER_ID,
              title: `${action[i].USER_ID}`,
              description: `${action[i].USER_NAME}`,
              disabled: false, //i % 4 === 0,
            });
          }
          originTargetKeys.value = [];
          for (let i = 0; i < tAction.length; i++) {
            originTargetKeys.value.push(tAction[i].USER_ID);
          }
          //Transfer组件，标题及数据源设置
          seDatas(
            _title,
            unref(transferData),
            unref(originTargetKeys),
            unref(rightTableColumns),
            unref(leftTableColumns),
          );
          console.log(res)
        }).catch(err => {
          console.log(err)
        });
      }
    });

      return {
        seDatas,
        ...toRefs(state),
        registerDrawer,
        // registerForm,
        getTitle,
        handleSubmit,
        handleCreate,
        onChange,
      };
    },
  });
    function handleCreate() {
      console.log('list', 11);
    }

    // const getTitle = computed(() => '添加用户到用户组');

    /**
     * @description: 提交方法
     * @return {*}
     */    
    async function handleSubmit() {
      try {
        //const values = await validate();
        setDrawerProps({ confirmLoading: true });
        // TODO custom api
        const _targetKeys = toRef(state, 'targetKeys');
        var _v: SpecificEntity = {
          ID: '',
          EntityStr: '',
          UserId: userStore.getUserInfo.userId,
          Extend1: _targetKeys.value.join(','),
          Extend2: _gpTid.value,
          Extend3: '',
        };
        if (unref(isRole)) {
          SetRoleToGroup(_v).then((action) => {
            if (action.IsSuccessed) {
              notification['success']({
                message: '操作成功',
                description: `向用户组添加角色：${_v.Extend1} 成功，${userStore.getUserInfo.userId}`,
              });
              emit('success');
            }
          });
        } else {
          _v.Extend2 = _targetKeys.value.join(',');
          _v.Extend3 = _gpTid.value;
          SetSysUserToGroup(_v).then((action) => {
            if (action.IsSuccessed) {
              notification['success']({
                message: '操作成功',
                description: `向用户组添加用户：${_v.Extend2} 成功，${userStore.getUserInfo.userId}`,
              });
              emit('success');
            }
          });
        }

        closeDrawer();
      } finally {
        setDrawerProps({ confirmLoading: false });
      }
    }

    return {
      seDatas,
      ...toRefs(state),
      registerDrawer,
      // registerForm,
      getTitle,
      handleSubmit,
      handleCreate,
      onChange,
    };
  },
});
</script>