zhangxiao
2024-08-05 f6ba464aa7856b8201e313fe79e651aab34e6509
src/views/authority/resource/index.vue
@@ -3,8 +3,11 @@
    <authheader :items="menuTips"></authheader>
    <a-row :gutter="20">
      <a-col :span="8">
        <a-card :title="$t('menu.resource.title')" :bordered="false"
                :style="{ width: '100%',height: '900px', 'overflow-y': 'auto' }">
        <a-card
          :title="$t('menu.resource.title')"
          :bordered="false"
          :style="{ 'width': '100%', 'height': '900px', 'overflow-y': 'auto' }"
        >
          <a-tree
            class="tree-demo"
            draggable
@@ -21,38 +24,66 @@
          >
            <template #extra="nodeData">
              <IconPlus
                style="position: absolute; right: 60px; font-size: 12px; top: 10px; color: #3370ff;"
                style="
                  position: absolute;
                  right: 60px;
                  font-size: 12px;
                  top: 10px;
                  color: #3370ff;
                "
                @click="() => onIconClick(nodeData)"
              />
              <IconDelete style="position: absolute; right: 40px; font-size: 12px; top: 10px; color: #3370ff;"
                          @click="() => onIconClickDelete(nodeData)" />
              <IconDelete
                style="
                  position: absolute;
                  right: 40px;
                  font-size: 12px;
                  top: 10px;
                  color: #3370ff;
                "
                @click="() => onIconClickDelete(nodeData)"
              />
            </template>
          </a-tree>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card :title="$t('menu.resource.detail')" :bordered="false" :style="{ width: '100%' }">
        <a-card
          :title="$t('menu.resource.detail')"
          :bordered="false"
          :style="{ width: '100%' }"
        >
          <a-form :model="resourceform" layout="horizontal">
            <a-form-item field="parentName" label="上级资源" disabled>
              <a-input v-model="resourceform.parentName" />
            </a-form-item>
            <a-form-item field="status" label="资源状态">
              <a-switch checked-value="0" unchecked-value="1" v-model="resourceform.status"></a-switch>
              <a-switch
                checked-value="0"
                unchecked-value="1"
                v-model="resourceform.status"
              ></a-switch>
            </a-form-item>
            <a-form-item field="menuName" label="资源名称">
              <a-input v-model="resourceform.menuName" />
            </a-form-item>
            <a-form-item field="menuType" label="资源类型">
              <a-select v-model="resourceform.menuType" :options="options" :field-names="fieldNames"
              <a-select
                v-model="resourceform.menuType"
                :options="options"
                :field-names="fieldNames"
                        :style="{width:'320px'}"
                        placeholder="请选择" />
                placeholder="请选择"
              />
            </a-form-item>
            <a-form-item field="perms" label="资源控制权限字符">
              <a-input v-model="resourceform.perms" />
            </a-form-item>
            <a-form-item field="component" label="资源地址" style="align: start">
            <a-form-item
              field="component"
              label="资源地址"
              style="align: start"
            >
              <a-input v-model="resourceform.component" />
            </a-form-item>
            <a-form-item>
@@ -65,21 +96,35 @@
        </a-card>
      </a-col>
    </a-row>
    <a-modal width="50%" v-model:visible="visible" title="新增" @cancel="handleCancel" @ok="addresource">
    <a-modal
      width="50%"
      v-model:visible="visible"
      title="新增"
      @cancel="handleCancel"
      @ok="addresource"
    >
      <a-form :model="resourceform" layout="horizontal">
        <a-form-item field="parentName" label="上级资源" disabled>
          <a-input v-model="resourceform.parentName" />
        </a-form-item>
        <a-form-item field="status" label="资源状态">
          <a-switch checked-value="0" unchecked-value="1" v-model="resourceform.status"></a-switch>
          <a-switch
            checked-value="0"
            unchecked-value="1"
            v-model="resourceform.status"
          ></a-switch>
        </a-form-item>
        <a-form-item field="menuName" label="资源名称">
          <a-input v-model="resourceform.menuName" />
        </a-form-item>
        <a-form-item field="menuType" label="资源类型">
          <a-select v-model="resourceform.menuType" :options="options" :field-names="fieldNames"
          <a-select
            v-model="resourceform.menuType"
            :options="options"
            :field-names="fieldNames"
                    :style="{width:'320px'}"
                    placeholder="请选择"  />
            placeholder="请选择"
          />
        </a-form-item>
        <a-form-item field="perms" label="资源控制权限字符">
          <a-input v-model="resourceform.perms" />
@@ -93,68 +138,89 @@
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { IconPlus } from "@arco-design/web-vue/es/icon";
import { Resource, ResourceAdd, ResourceById, ResourceDelete, ResourceList, ResourceUpdate } from "@/api/authority";
import Authheader from "@/views/authority/components/authheader.vue";
import { Modal } from "@arco-design/web-vue";
  import { ref } from 'vue';
  import { IconPlus } from '@arco-design/web-vue/es/icon';
  import {
    Resource,
    ResourceAdd,
    ResourceById,
    ResourceDelete,
    ResourceList,
    ResourceUpdate,
  } from '@/api/authority';
  import Authheader from '@/views/authority/components/authheader.vue';
  import { Modal } from '@arco-design/web-vue';
let visible = ref(false);
let treeData = ref([]);
let showLine = ref(true);
let menuTips = ref(["权限管理", "资源"]);
const fieldNames = { value: "key", label: "value" };
  let menuTips = ref(['权限管理', '资源']);
  const fieldNames = { value: 'key', label: 'value' };
// 0目录 1菜单 2按钮
let options = ref([
  {
    key: "0",
    value: "目录"
      key: '3',
      value: '目录',
  },
  {
    key: "1",
    value: "菜单"
      key: '0',
      value: '菜单',
  },
  {
    key: "2",
    value: "按钮"
  }
      key: '1',
      value: '按钮',
    },
]);
let resourceform = ref<Resource>({
  component: "",
  createTime: "",
  description: "",
  icon: "",
  menuId: "",
  menuName: "",
  menuType: "",
  orderNum: "",
  parentId: "",
  parentName: "",
    component: '',
    createTime: '',
    description: '',
    icon: '',
    menuId: '',
    menuName: '',
    menuType: '',
    orderNum: '',
    parentId: '',
    parentName: '',
  children: [],
  path: "",
  perms: "",
  status: "",
  syesourcetype: "",
  target: "",
  updateTime: ""
    path: '',
    perms: '',
    status: '',
    syesourcetype: '',
    target: '',
    updateTime: '',
});
const onIconClick = (nodeData) => {
  resourceform.value.parentId = nodeData.menuId;
    resourceform.value.component = '';
    resourceform.value.createTime = '';
    resourceform.value.description = '';
    resourceform.value.icon = '';
    resourceform.value.menuId = '';
    resourceform.value.menuName = '';
    resourceform.value.menuType = '';
    resourceform.value.orderNum = '0';
    resourceform.value.parentName = nodeData.menuName;
    resourceform.value.path = '';
    resourceform.value.perms = '';
    resourceform.value.status = '';
    resourceform.value.syesourcetype = '';
  visible.value = true;
};
const addresource = async () => {
  await ResourceAdd({
    ...resourceform.value
      ...resourceform.value,
  } as unknown as Resource).then((res) => {
    ResourceData("");
      ResourceData('');
  });
};
const onIconClickDelete = (nodeData) => {
  ResourceDelete(nodeData.menuId).then(() => {
    ResourceData("");
      ResourceData('');
  });
};
@@ -165,12 +231,12 @@
};
const editresource = () => {
  ResourceUpdate({
    ...resourceform.value
      ...resourceform.value,
  } as unknown as Resource).then((res) => {
    ResourceData("");
      ResourceData('');
    Modal.success({
      title: "保存成功",
      content: "保存成功"
        title: '保存成功',
        content: '保存成功',
    });
  });
};
@@ -183,7 +249,9 @@
const onDrop = ({ dragNode, dropNode, dropPosition }) => {
  const data = treeData.value;
  ResourceUpdate({
    orderNum: "0", parentId: dropNode.menuId, menuId: dragNode.menuId
      orderNum: '0',
      parentId: dropNode.menuId,
      menuId: dragNode.menuId,
  });
  const loop = (data, key, callback) => {
    data.some((item, index, arr) => {
@@ -226,9 +294,8 @@
  });
};
ResourceData("");
  ResourceData('');
</script>
<style scoped>
.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),