zhangxiao
2024-08-08 3438297d98a80b8876cf43efdfee4a0216d81396
src/views/authority/organization/index.vue
@@ -4,7 +4,11 @@
    <a-row :gutter="20">
      <a-col :span="8">
        <a-card :title="$t('menu.organization.title')" :bordered="false" :style="{ width: '100%',height: '900px', 'overflow-y': 'auto' }">
        <a-card
          :title="$t('menu.organization.title')"
          :bordered="false"
          style=" 'width': '100%';   height: calc(100vh - 250px);; 'overflow-y': 'auto' "
        >
          <a-tree
            class="tree-demo"
            draggable
@@ -21,24 +25,45 @@
          >
            <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.organization.detail')" :bordered="false" :style="{ width: '100%' }">
        <a-card
          :title="$t('menu.organization.detail')"
          :bordered="false"
          :style="{ width: '100%' }"
        >
          <a-form :model="deptform" layout="horizontal">
            <a-form-item field="parentName" label="上级机构">
              <a-input v-model="deptform.parentId" />
            </a-form-item>
            <a-form-item field="status" label="机构状态">
              <a-switch checked-value="0" unchecked-value="1" v-model="deptform.status"></a-switch>
              <a-switch
                checked-value="0"
                unchecked-value="1"
                v-model="deptform.status"
              ></a-switch>
            </a-form-item>
            <a-form-item field="deptName" label="机构名称">
              <a-input v-model="deptform.deptName" />
@@ -62,13 +87,23 @@
        </a-card>
      </a-col>
    </a-row>
    <a-modal width="50%" v-model:visible="visible" title="新增" @cancel="handleCancel" @ok="addDept">
    <a-modal
      width="50%"
      v-model:visible="visible"
      title="新增"
      @cancel="handleCancel"
      @ok="addDept"
    >
      <a-form :model="deptform" layout="horizontal">
        <a-form-item field="parentName" label="上级机构">
          <a-input v-model="deptform.parentName" />
        </a-form-item>
        <a-form-item field="status" label="机构状态">
          <a-switch checked-value="0" unchecked-value="1" v-model="deptform.status"></a-switch>
          <a-switch
            checked-value="0"
            unchecked-value="1"
            v-model="deptform.status"
          ></a-switch>
        </a-form-item>
        <a-form-item field="deptName" label="机构名称">
          <a-input v-model="deptform.deptName" />
@@ -88,34 +123,34 @@
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { IconPlus } from "@arco-design/web-vue/es/icon";
  import { ref } from 'vue';
  import { IconPlus } from '@arco-design/web-vue/es/icon';
import {
  Organization,
  OrganizationAdd,
  OrganizationById,
  OrganizationDelete,
  OrganizationList,
  OrganizationUpdate
} from "@/api/authority";
import Authheader from "@/views/authority/components/authheader.vue";
import { Modal } from "@arco-design/web-vue";
    OrganizationUpdate,
  } 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(["权限管理", "机构"]);
  let menuTips = ref(['权限管理', '机构']);
let deptform = ref<Organization>({
  deptName: "",
  email: "",
  leader: "",
  orderNum: "0",
  parentId: "",
  parentName: "",
  phone: "",
  status: "",
  address: "",
  deptId: ""
    deptName: '',
    email: '',
    leader: '',
    orderNum: '0',
    parentId: '',
    parentName: '',
    phone: '',
    status: '',
    address: '',
    deptId: '',
});
const onIconClick = (nodeData) => {
@@ -126,15 +161,15 @@
const addDept = async () => {
  await OrganizationAdd({
    ...deptform.value
      ...deptform.value,
  } as unknown as Organization).then((res) => {
    OrganizationData("");
      OrganizationData('');
  });
};
const onIconClickDelete = (nodeData) => {
  OrganizationDelete(nodeData.deptId).then(() => {
    OrganizationData("");
      OrganizationData('');
  });
};
@@ -145,25 +180,27 @@
};
const editdept=()=>{
   OrganizationUpdate({
    ...deptform.value
      ...deptform.value,
  } as unknown as Organization).then((res) => {
    OrganizationData("");
      OrganizationData('');
     Modal.success({
       title: "保存成功",
       content: "保存成功"
        title: '保存成功',
        content: '保存成功',
     });
  });
}
  };
const reset=(id)=>{
  OrganizationById(id).then((res) => {
    deptform.value = {...res.data};
  });
}
  };
const onDrop = ({ dragNode, dropNode, dropPosition }) => {
  const data = treeData.value;
  OrganizationUpdate({
    orderNum: "0", parentId: dropNode.deptId, deptId: dragNode.deptId
      orderNum: '0',
      parentId: dropNode.deptId,
      deptId: dragNode.deptId,
  });
  const loop = (data, key, callback) => {
    data.some((item, index, arr) => {
@@ -206,9 +243,8 @@
  });
};
OrganizationData("");
  OrganizationData('');
</script>
<style scoped>
.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),