SaaS-lib/hx-op/src/view/organizationManage/enterpriseManage/index.vue

<!-- @format -->

<template>
  <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" rowKey="uuid" />
  <ns-drawer v-bind="addDrawerConfig">
    <ns-form ref="formRef" :schemas="formSchema" :model="formData" formLayout="vertical" />
    <template #footer>
      <ns-button style="margin-right: 8px" @click="onClose">取消</ns-button>
      <ns-button type="primary" @click="operateForm" :disabled="!formDisabled">确定</ns-button>
    </template>
  </ns-drawer>
  <ns-drawer
    :width="600"
    :visible="borderVisible"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    destroyOnClose
    @close="onClose">
    <ns-button type="primary" @click="borderAdd">新增</ns-button>
    <ns-button type="primary" style="margin-left: 10px; margin-bottom: 10px" @click="borderAddSon"
      >新增子集</ns-button
    >
    <a-directory-tree @select="handleSelect" multiple :tree-data="treeData">
      <template #title="{ title, key }">
        {{ title }}
        <ns-button type="link" @click="editTree(title, key)">编辑</ns-button>
        <ns-button type="link" danger @click="deleteTree(title, key)">删除</ns-button>
      </template>
    </a-directory-tree>
  </ns-drawer>

  <ns-drawer v-bind="serverDrawer">
    <ns-input-search
      placeholder="请选择开通模块"
      v-model:value="searchValue"
      style="margin-bottom: 8px"
      @search="onSearch" />
    <a-tree v-if="treeData?.length" v-model:checkedKeys="checkedKeys" v-bind="serverTree" />
  </ns-drawer>

  <TreeAdd ref="treeAdd" />
</template>
<script lang="ts" setup>
  import { Modal } from 'ant-design-vue';
  import { computed, createVNode, defineComponent, reactive, ref, watch } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { cloneDeep } from 'lodash-es';
  import TreeAdd from './TreeAdd.vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { h } from 'vue';
  import { formConfig } from './config';
  import { NsMessage } from '/nerv-lib/component';
  import { mockData, treeData } from './mock';
  import { enterPrise } from '/@/api/origanizemanage';
  import { tableConfig as insertConfig } from './config';
  defineOptions({
    name: 'EnterpriseManageIndex',
  });

  const data = reactive({});
  const treeAdd = ref();
  const mainRef = ref();
  let formData = ref({});
  const formRef = ref();
  const searchValue = ref<string>('');
  const checkedKeys = ref<string[]>([]);
  const visible = ref(false);
  const borderVisible = ref(false);
  const serviceVisible = ref(false);
  const treeAddVisible = ref(false);
  const formSchema = formConfig;
  const opType = ref<string>('add');
  const calMap = {
    add: enterPrise.save,
    edit: enterPrise.edit,
  };
  const comApi = computed(() => {
    return calMap[opType.value as keyof typeof calMap];
  });
  const tableConfig = computed(() => {
    return insertConfig({
      visible,
      formData,
      opType,
      getOrgRandomCode,
      borderVisible,
      serviceVisible,
      server: {
        getTree,
      },
    });
  });

  const getOrgRandomCode = () => {
    http.post(enterPrise.getCode).then((res) => {
      formData.value.orgCode = res.data;
    });
  };
  getOrgRandomCode();

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

  // 企业表单drawer
  const addDrawerConfig = ref({
    width: '520',
    visible: visible,
    footerStyle: { textAlign: 'right' },
    destroyOnClose: true,
    onClose: onClose,
  });

  const formDisabled = computed(() => {
    return formRef.value?.validateResult;
  });

  //企业表单数据操作
  const operateForm = () => {
    formRef.value?.triggerSubmit().then((res) => {
      console.log(formData.value, 'formData.value');
      http.post(comApi.value, res).then(() => {
        NsMessage.success('操作成功');
        visible.value = false;
        mainRef.value?.nsTableRef.reload();
      });
    });
  };

  // 服务操作逻辑区域
  const serverOK = () => {
    serviceVisible.value = false;
  };
  const ServiceSelect = (selectedKeys: any, info: any) => {
    console.log(selectedKeys, 'selectedKeys');
    console.log(info, 'info');
  };

  const serverTree = ref({
    checkable: true,
    onSelect: ServiceSelect,
    defaultExpandAll: true,
    treeData: treeData,
    fieldNames: { children: 'menus', title: 'label', key: 'code' },
  });

  const getTree = (params) => {
    http.post(enterPrise.permissionTree, params).then((res) => {
      treeData.value = res.data.data;
    });
  };

  // 开通服务模块drawer
  const serverDrawer = ref({
    width: '450',
    visible: serviceVisible,
    footerStyle: { textAlign: 'right' },
    ok: serverOK,
    cancel: onClose,
  });

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

  watch(checkedKeys, () => {
    console.log('checkedKeys', checkedKeys.value);
  });

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

  const borderAdd = () => {
    treeAddVisible.value = true;
    treeAdd.value?.toggle();
  };

  const borderAddSon = () => {
    treeAddVisible.value = true;
  };

  const editTree = (title: any, key: any) => {
    console.log(title, 'title');
    console.log(key, 'key');
  };

  const deleteTree = (title: any, key: any) => {
    console.log(title, 'title');
    console.log(key, 'key');
    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();
        //   });
      },
      onCancel() {
        console.log('Cancel');
      },
      class: 'test',
    });
  };

  const onSearch = () => {
    console.log(searchValue.value);
  };
</script>