迁移

project/biaopin/AppOrganizationChange/components/List.vue

@@ -0,0 +1,109 @@
+<template>
+  <ai-detail list class="List">
+    <template slot="title">
+      <ai-title title="组织换届" isShowBottomBorder>
+        <template #rightBtn>
+          <el-button size="small" type="primary" @click="toAdd(selected.id)" v-if="hasConfig&&permissions('app_apporganizationchangeconfig')">换届设置
+          </el-button>
+        </template>
+      </ai-title>
+    </template>
+    <el-row slot="content" type="flex">
+      <ai-tree-menu title="组织目录" searchPlaceholder="请输入组织名称" @search="onSearch">
+        <ai-party-tree
+            :filter-node-method="filterNode"
+            ref="tree"
+            :instance="instance"
+            :root="user.info.organizationId"
+            :current-node-key="selected.id"
+            @select="onTreeChange"/>
+      </ai-tree-menu>
+      <el-scrollbar class="fill mar-l16 mainContent">
+        <ai-card title="当前届次">
+          <moment slot="content" :selected="selected" v-on="$listeners" :hasConfig.sync="hasConfig"/>
+        </ai-card>
+        <ai-card title="历史届次" v-if="hasConfig">
+          <history slot="content" :selected="selected" v-on="$listeners"/>
+        </ai-card>
+      </el-scrollbar>
+    </el-row>
+  </ai-detail>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import moment from './moment.vue'
+import history from './history.vue'
+
+export default {
+  name: 'List',
+  inject: ['permissions', 'instance', 'dict'],
+  data() {
+    return {
+      tabs: [
+        {label: '当前届次', name: 'moment', comp: moment, permission: ''},
+        {label: '历史届次', name: 'history', comp: history, permission: ''}
+      ],
+      currIndex: '0',
+      selected: null,
+      hasConfig: false
+    }
+  },
+  components: {
+    moment,
+    history,
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {
+    onTreeChange(e) {
+      this.selected = e
+    },
+    onSearch(v) {
+      this.$refs.tree?.$refs?.partyTree?.filter(v)
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    toAdd(oid) {
+      this.$router.push({hash: "#add", query: {oid}})
+    },
+  },
+  created() {
+    const {organizationId: id, organizationName: name} = this.user.info
+    this.selected = {id, name}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.List {
+  position: relative;
+
+  :deep(.ai-detail__content--wrapper ){
+    height: 100%;
+
+    & > * {
+      height: inherit;
+    }
+
+    .mainContent {
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+      }
+    }
+
+    .AiTreeMenu {
+      min-width: 300px;
+      box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
+    }
+  }
+
+  :deep( .is-current > .el-tree-node__content ){
+    width: 100% !important;
+    padding-right: 16px !important;
+  }
+}
+</style>