SaaS-lib/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue

<!-- @format -->

<template>
  <div class="main">
    <div class="left">
      <div class="top">
        <div class="ns-table-title">关联企业</div>
        <div>
          <a-input-search
            v-model:value="searchValue"
            style="margin-bottom: 8px"
            placeholder="请输入关联企业"
            @search="onSearch" />
          <a-tree :tree-data="treeData" defaultExpandAll @select="handleSelect">
            <template #title="{ title }">
              {{ title }}
              <!-- <span v-if="title.indexOf(searchValue) > -1">
                    {{ title.substring(0, title.indexOf(searchValue)) }}
                  </span>
                  <span v-else>{{ title }}</span> -->
            </template>
          </a-tree>
        </div>
      </div>
      <div class="ns-table-title">关联部门</div>
      <div>
        <a-input-search
          v-model:value="searchValue2"
          style="margin-bottom: 8px"
          placeholder="请输入关联部门"
          @search="onSearch2" />
        <a-tree :tree-data="treeData2" defaultExpandAll @select="handleSelect2">
          <template #title="{ title }">
            {{ title }}
            <!-- <span v-if="title.indexOf(searchValue) > -1">
                    {{ title.substring(0, title.indexOf(searchValue)) }}
                  </span>
                  <span v-else>{{ title }}</span> -->
          </template>
        </a-tree>
      </div>
    </div>
    <div class="right">
      <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" />
    </div>
    <a-drawer
      :width="1200"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      destroyOnClose
      @close="onClose">
      <ns-form ref="formRef" :schemas="formSchema" :model="formData" class="form" />
      <span class="admin">用户权限</span>
      <ns-view-list-table v-bind="tableConfig2" :model="data" ref="mainRef" rowKey="uuid" />
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onEdit">确定</a-button>
    </a-drawer>

    <a-modal
      title="用户信息"
      :width="600"
      :visible="addformvisible"
      cancelText="取消"
      @ok="handleOk"
      @cancel="handleClose">
      <ns-form :schemas="formSchema2" :model="formData2" formLayout="vertical" />
    </a-modal>
  </div>
</template>
<script lang="ts">
  import { Modal } from 'ant-design-vue';
  import { createVNode, defineComponent, reactive, ref } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { cloneDeep } from 'lodash-es';
  import { NsMessage } from '/nerv-lib/component';
  import { formConfig, formConfig2 } from './config';
  import { mockData, mockData2, treeData, treeData2 } from './mock';
  import { origanizemanage } from '/@/api/origanizemanage';

  export default defineComponent({
    name: 'OrderListIndex',
    setup() {
      const mainRef = ref();
      const data = reactive({});
      let formData = ref({});
      let formData2 = ref({});
      const formRef = ref();
      const visible = ref(false);
      const addformvisible = ref(false);
      const searchValue = ref<string>('');
      const searchValue2 = ref<string>('');
      const formSchema = formConfig;
      const casData = ref([]);
      const formSchema2 = formConfig2(casData);

      const opMap: any = {
        type: 'add',
        fuc: () => {},
        record: {},
      };

      const onSearch = () => {
        console.log(searchValue.value);
      };
      const onSearch2 = () => {
        console.log(searchValue2.value);
      };

      const handleSelect = (selectedKeys: any, info: any) => {
        console.log(selectedKeys, 'selectedKeys');
        console.log(info, 'info');
      };
      const handleSelect2 = (selectedKeys: any, info: any) => {
        console.log(selectedKeys, 'selectedKeys');
        console.log(info, 'info');
      };

      const onClose = () => {
        visible.value = false;
      };

      const onEdit = () => {
        formRef.value?.triggerSubmit().then(() => {
          console.log(formData.value, 'formData.value');
          opMap.fuc && opMap.fuc(formData.value);
          visible.value = false;
        });
      };

      const handleOk = () => {
        console.log(formData2.value, 'formData2.value');
        console.log(opMap.type, 'type');
        if (opMap.type === 'add') {
          mockData2.value.push({ information: casData.value.join('/') });
        } else {
        }
        addformvisible.value = false;
      };
      const handleClose = () => {
        addformvisible.value = false;
      };

      const tableConfig = {
        title: '用户管理',
        api: origanizemanage.userList,
        params: {
          orgId: JSON.parse(sessionStorage.getItem('userInfo')).orgId,
        },
        listField: 'data.records',
        headerActions: [
          {
            label: '新增',
            name: 'RoleTypeAdd',
            type: 'primary',
            handle: () => {
              opMap.type = 'add';
              opMap.fuc = (formData: any) => {
                console.log(formData, 'formData');
                // origanizemanage.addUser
                // mockData.value.push({
                //   id: Math.random().toString().slice(2, 6),
                //   ...cloneDeep(formData),
                // });
              };
              visible.value = true;
            },
          },
          {
            label: '导入',
            type: 'primary',
            name: 'RoleTypeAdd',
            handle: () => {},
          },
          {
            label: '模板下载',
            type: 'primary',
            name: 'RoleTypeAdd',
            handle: () => {},
          },
          {
            label: '导出',
            type: 'primary',
            name: 'exports',
          },
          {
            label: '批量删除',
            type: 'primary',
            name: 'RoleTypeAdd',
            dynamicDisabled: (data: any) => {
              return data.list.length === 0;
            },
            confirm: true,
            isReload: true,
            handle: (data: any) => {
              console.log('object :>> ', data.list);
              const idList = data.list.map((item) => item.id);
              mockData.value.splice(0);
              return;
              const copyData = cloneDeep(mockData.value);
              mockData.value = copyData.filter((tar) => {
                return !idList.includes(tar.id);
              });

              console.log(mockData.value);

              return;
              copyData.map((item, index) => {
                if (idList.includes(item.id)) {
                  mockData.value.filter((tar) => {
                    return !idList.includes(tar.id);
                  });
                }
              });
            },
          },
        ],
        columns: [
          {
            title: '序号',
            dataIndex: 'address',
            customRender: (text: any) => {
              return text.index + 1;
            },
            sorter: {
              compare: (a, b) => a.address - b.address,
            },
          },
          {
            title: '账号',
            dataIndex: 'accountNo',
            sorter: {
              compare: (a, b) => a.accountNo - b.accountNo,
            },
          },
          {
            title: '姓名',
            dataIndex: 'realName',
            sorter: {
              compare: (a, b) => a.realName - b.realName,
            },
          },
          {
            title: '性别',
            dataIndex: 'sex',
            sorter: {
              compare: (a, b) => a.name - b.name,
            },
          },
          {
            title: '手机号',
            dataIndex: 'telephone',
          },
          {
            title: '邮箱',
            dataIndex: 'email',
          },
          {
            title: '组织关系',
            dataIndex: 'deptInfo',
            customRender: (value) => {
              return value.record.deptInfo.orgName;
            },
          },
          {
            title: '部门/角色',
            dataIndex: 'orgInfo',
            customRender: (value) => {
              // // console.log(value.record.orgInfo.orgName, 'ss');
              // console.log(
              //   value.record.userRoleList.map((item) => {
              //     return `${value.record.orgInfo.orgName}/${item.roleName}`;
              //   }),
              // );
              // value.record.userRoleList.map((item) => {
              //   return `${value.record.orgInfo.orgName}/${item.roleName}`;
              // });
              // return `${value.record.orgInfo.orgName}/`;
            },
          },
          {
            title: '状态',
            dataIndex: 'userStatus',
          },
        ],
        columnActions: {
          title: '操作',
          actions: [
            {
              label: '编辑',
              name: 'RoleTypeEdit',
              // dynamicParams: 'uuid',
              handle: (record: any) => {
                console.log(record, 'record');
                formData.value = record;
                opMap.type = 'edit';
                opMap.fuc = (formData: any) => {
                  Object.assign(
                    mockData.value.filter((item) => item.id === record.id)[0],
                    formData,
                  );
                };
                visible.value = true;
              },
            },
            {
              label: '冻结',
              name: 'RoleTypeEdit',
              handle: (record: any) => {
                console.log(record, 'record');
                Modal.confirm({
                  title: '是否冻结该账户',
                  icon: createVNode(ExclamationCircleOutlined),
                  content: createVNode('div', { style: 'color:red;' }, ''),

                  onOk() {
                    // http
                    //   .post('/api/parking_merchant/objs/gateInfo/delete', {
                    //     uuid: record.uuid,
                    //   })
                    //   .then((res) => {
                    //     mainRef.value.nsTableRef.reload();
                    //   });
                    NsMessage.success('冻结成功');
                  },
                  class: 'test',
                });
              },
            },
            {
              label: '重置密码',
              name: 'RoleTypeEdit',
              handle: (record: any) => {
                console.log(record, 'record');
                Modal.confirm({
                  title: '是否重置密码',
                  icon: createVNode(ExclamationCircleOutlined),
                  content: createVNode('div', { style: 'color:red;' }, ''),
                  onOk() {
                    // Modal.success({
                    //   title: '密码重置成功,初始密码123456',
                    // });
                    NsMessage.success('密码重置成功,初始密码123456');
                  },
                  onCancel() {
                    console.log('Cancel');
                  },
                  class: 'test',
                });
              },
            },
            {
              label: '删除',
              name: 'RoleTypeEdit',
              dynamicParams: {
                uuid: 'uuid',
              },
              confirm: true,
              handle: (record: any, name: any, reload: any) => {
                console.log(record, name, reload, 'record');
                mockData.value.splice(0, 1);
              },
            },
          ],
        },

        formConfig: {
          schemas: [
            {
              field: 'accountNo',
              label: '账号名',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入账号名',
                maxLength: 30,
              },
            },
            {
              field: 'realName',
              label: '姓名',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入姓名',
                maxLength: 30,
              },
            },
            {
              field: 'telephone',
              label: '手机号',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入手机号',
                maxLength: 11,
              },
            },
            {
              field: 'email',
              label: '邮箱',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入邮箱',
                maxLength: 30,
              },
            },
            {
              field: 'userStatus',
              label: '用户状态',
              component: 'NsSelect',
              componentProps: {
                placeholder: '请选择',
                disabled: true,
                options: [
                  {
                    label: '正常',
                    value: 1,
                  },
                  {
                    label: '冻结',
                    value: 2,
                  },
                ],
              },
            },
          ],
          params: {},
        },
        // pagination: { defaultPageSize: 10 },
        rowKey: 'id',
      };
      const tableConfig2 = {
        // api: {
        //   url: '/carbon_emission/device/getGatewayList',
        //   method: 'post',
        // },
        value: mockData2.value,
        listField: 'data.records',
        rowSelection: null,
        headerActions: [
          {
            label: '新增',
            name: 'RoleTypeAdd',
            type: 'primary',
            handle: () => {
              opMap.type = 'add';
              opMap.fuc = (formData2: any) => {
                console.log(formData2, 'formData2');
                mockData2.value.push(cloneDeep(formData2));
              };
              addformvisible.value = true;
            },
          },
        ],
        columns: [
          {
            title: '角色信息',
            dataIndex: 'information',
          },
        ],
        columnActions: {
          title: '操作',
          actions: [
            {
              label: '编辑',
              name: 'RoleTypeEdit',
              // dynamicParams: 'uuid',
              handle: (record: any) => {
                console.log(record, 'record');
                formData2.value = record;
                opMap.type = 'edit';
                opMap.fuc = (formData2: any) => {
                  Object.assign(
                    mockData.value.filter((item) => item.id === record.id)[0],
                    formData2,
                  );
                };
                addformvisible.value = true;
              },
            },
            {
              label: '删除',
              name: 'RoleTypeEdit',
              confirm: true,
              handle: (record: any, name: any, reload: any) => {
                console.log(record, name, reload, 'record');
                mockData2.value.splice(0, 1);
              },
            },
          ],
        },
      };

      return {
        formRef,
        tableConfig,
        tableConfig2,
        data,
        mainRef,
        visible,
        addformvisible,
        formSchema,
        formSchema2,
        formData,
        formData2,
        treeData,
        treeData2,
        searchValue,
        searchValue2,
        handleSelect,
        handleSelect2,
        onClose,
        onEdit,
        onSearch,
        onSearch2,
        handleOk,
        handleClose,
      };
    },
  });
</script>
<style lang="less" scoped>
  .main {
    display: flex;
  }
  .left {
    width: 400px;
    border-right: 5px solid rgb(229, 235, 240);
    min-width: fit-content;
  }
  .right {
    flex: 1;
    overflow: auto;
  }
  .top {
    height: 46vh;
    border-bottom: 5px solid rgb(229, 235, 240);
  }
  .ns-table-title {
    text-align: left;
    // height: 46px;
    line-height: 46px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 16px;
  }
  .admin {
    text-align: left;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    font-weight: bold;
    user-select: text;
    padding-left: 16px;
    width: calc(100% + 32px);
  }
  .form {
    margin-left: 10px;
  }
</style>