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>
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onEdit">确定</a-button>
    </template>
  </ns-drawer>
  <a-drawer
    :width="600"
    :visible="borderVisible"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    destroyOnClose
    @close="onClose">
    <a-button type="primary" @click="borderAdd">新增</a-button>
    <a-button type="primary" style="margin-left: 10px; margin-bottom: 10px" @click="borderAddSon"
      >新增子集</a-button
    >
    <a-directory-tree @select="handleSelect" multiple :tree-data="treeData">
      <template #title="{ title, key }">
        {{ title }}
        <a-button type="link" @click="editTree(title, key)">编辑</a-button>
        <a-button type="link" danger @click="deleteTree(title, key)">删除</a-button>
      </template>
    </a-directory-tree>
  </a-drawer>

  <a-drawer
    :width="600"
    :visible="serviceVisible"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    destroyOnClose
    @close="onClose">
    <a-input-search
      placeholder="请选择开通模块"
      v-model:value="searchValue"
      style="margin-bottom: 8px"
      @search="onSearch" />
    <a-tree
      :tree-data="treeData"
      v-model:checkedKeys="checkedKeys"
      checkable
      @select="ServiceSelect">
      <template #title="{ title }">
        {{ title }}
      </template>
    </a-tree>
    <ns-button style="margin: 20px" type="primary" @click="onClose">取消</ns-button>
    <ns-button type="primary" @click="Sure">确定</ns-button>
  </a-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 tableConfig = computed(() => {
    return insertConfig(visible);
  });

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

  // 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 ServiceSelect = (selectedKeys: any, info: any) => {
    console.log(selectedKeys, 'selectedKeys');
    console.log(info, 'info');
  };

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

  const addDrawerConfig = ref({
    width: '520',
    visible: visible,
    footerStyle: { textAlign: 'right' },
    destroyOnClose: true,
    onClose: onClose,
  });

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

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

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

  const Sure = () => {
    serviceVisible.value = false;
  };

  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>