资源管理1.0(树结构）

package.json

@@ -10,42 +10,43 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@jeecg/antd-online-mini": "3.4.3-beta2",
-    "ant-design-vue": "^1.7.2",
     "@antv/data-set": "^0.11.4",
-    "viser-vue": "^2.4.8",
+    "@jeecg/antd-online-mini": "3.4.3-beta2",
+    "@tinymce/tinymce-vue": "2.1.0",
+    "@toast-ui/editor": "^2.1.2",
+    "ant-design-vue": "^1.7.2",
     "axios": "^0.18.0",
+    "china-area-data": "^5.0.1",
+    "clipboard": "^2.0.4",
+    "codemirror": "^5.46.0",
+    "cron-parser": "^2.10.0",
     "dayjs": "^1.8.0",
+    "dom-align": "1.12.0",
+    "echarts": "^5.4.3",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
+    "qiankun": "^2.5.1",
+    "tinymce": "5.4.1",
+    "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
+    "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.1.0",
-    "vue-print-nb-jeecg": "^1.0.12",
-    "clipboard": "^2.0.4",
     "vue-photo-preview": "^1.1.3",
+    "vue-print-nb-jeecg": "^1.0.12",
+    "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
     "vuedraggable": "^2.20.0",
-    "codemirror": "^5.46.0",
+    "vuex": "^3.1.0",
-    "@tinymce/tinymce-vue": "2.1.0",
-    "tinymce": "5.4.1",
-    "@toast-ui/editor": "^2.1.2",
-    "vue-area-linkage": "^5.1.0",
-    "china-area-data": "^5.0.1",
-    "dom-align": "1.12.0",
-    "xe-utils": "2.4.8",
     "vxe-table": "2.9.13",
     "vxe-table-plugin-antd": "1.8.10",
-    "cron-parser": "^2.10.0",
+    "xe-utils": "2.4.8",
-    "qiankun": "^2.5.1",
     "xss": "^1.0.13"
   },
   "devDependencies": {
@@ -55,13 +56,13 @@
     "@vue/cli-service": "^3.3.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "7.2.3",
+    "compression-webpack-plugin": "^3.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.1.0",
+    "html-webpack-plugin": "^4.2.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.6.10",
+    "vue-template-compiler": "^2.6.10"
-    "html-webpack-plugin": "^4.2.0",
-    "compression-webpack-plugin": "^3.1.0"
   },
   "eslintConfig": {
     "root": true,

src/main.js

@@ -8,6 +8,9 @@ import router from './router'
 import store from './store/'
 import { VueAxios } from "@/utils/request"
 
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 require('@jeecg/antd-online-mini')
 require('@jeecg/antd-online-mini/dist/OnlineForm.css')
 

src/views/dashboard/Analysis.vue

@@ -1,6 +1,16 @@
 <template>
   <div>
-   
+    <index-chart v-if="indexStyle==1"></index-chart>
+    <index-bdc v-if="indexStyle==2"></index-bdc>
+    <index-task v-if="indexStyle==3"></index-task>
+    <div style="width: 100%;text-align: right;margin-top: 20px">
+      请选择首页样式：
+      <a-radio-group v-model="indexStyle">
+        <a-radio :value="1">统计图表</a-radio>
+        <a-radio :value="2">统计图表2</a-radio>
+        <a-radio :value="3">任务表格</a-radio>
+      </a-radio-group>
+    </div>
   </div>
 </template>
 

src/views/dashboard/IndexBdc.vue

@@ -1,5 +1,174 @@
 <template>
   <div class="page-header-index-wide">
+    <a-row :gutter="24">
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card :loading="loading" title="成员访问次数" :total="cardCount.sll | NumberFormat">
+          <a-tooltip title="指标说明" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <mini-area :data-source="chartData.sll" />
+          </div>
+          <template slot="footer">今日访问量：<span>{{ todaySll }}</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
+          <a-tooltip title="指标说明" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <mini-area :data-source="chartData.bjl"/>
+          </div>
+          <template slot="footer">今日办结量：<span>{{ todayBjl }}</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
+          <a-tooltip title="指标说明" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <mini-bar :datasource="chartData.isll" :height="50"/>
+          </div>
+          <template slot="footer">用户今日受理量：<span>{{ todayISll }}</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
+          <a-tooltip title="指标说明" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <mini-bar :datasource="chartData.ibjl" :height="50"/>
+          </div>
+          <template slot="footer">用户今日办结量：<span>{{ todayIBjl }}</span></template>
+        </chart-card>
+      </a-col>
+    </a-row>
+
+    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
+      <div class="salesCard">
+        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+          <div class="extra-wrapper" slot="tabBarExtraContent">
+            <div class="extra-item">
+              <a>今日</a>
+              <a>本周</a>
+              <a>本月</a>
+              <a>本年</a>
+            </div>
+            <a-range-picker :style="{width: '256px'}" />
+          </div>
+
+          <a-tab-pane loading="true" tab="访问监管" key="1">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <index-bar title="访问量统计" />
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+
+                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
+                  <div class="item-group">
+                    <a-row>
+                      <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
+                        <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
+                      </a-col>
+                    </a-row>
+                  </div>
+                </a-card>
+
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+
+          <a-tab-pane tab="交互监管" key="2">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <bar-multid :sourceData="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+
+                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
+                  <div class="item-group">
+                    <a-row>
+                      <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
+                        <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
+                      </a-col>
+                    </a-row>
+                  </div>
+                </a-card>
+
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+
+          <a-tab-pane tab="存储监管" key="4">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <a-row>
+                  <template v-if="diskInfo && diskInfo.length>0">
+                    <a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
+                      <dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo>
+                    </a-col>
+                  </template>
+                </a-row>
+              </a-col>
+
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+
+                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
+                  <div class="item-group">
+                    <a-row>
+                      <a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
+                        <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
+                      </a-col>
+                    </a-row>
+                  </div>
+                </a-card>
+
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+
+        </a-tabs>
+
+      </div>
+    </a-card>
+
+    <a-row :gutter="12">
+      <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">
+
+        <a-tabs v-model="indexBottomTab" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+          <div class="extra-wrapper" slot="tabBarExtraContent">
+            <a-radio-group v-model="indexRegisterType" @change="changeRegisterType">
+              <a-radio-button value="转移登记">转移登记</a-radio-button>
+              <a-radio-button value="抵押登记">抵押登记</a-radio-button>
+              <a-radio-button value="">所有</a-radio-button>
+            </a-radio-group>
+          </div>
+
+          <a-tab-pane loading="true" tab="业务流程限时监管" key="1">
+
+            <a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1">
+              <template slot="flowRate" slot-scope="text, record, index">
+                <a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
+              </template>
+            </a-table>
+          </a-tab-pane>
+
+          <a-tab-pane loading="true" tab="业务节点限时监管" key="2">
+            <a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination2" @change="tableChange2">
+              <template slot="flowRate" slot-scope="text, record, index">
+                <span style="color: red;">{{ record.flowRate }}小时</span>
+              </template>
+            </a-table>
+          </a-tab-pane>
+
+        </a-tabs>
+
+
+      </a-card>
+    </a-row>
 
   </div>
 </template>

src/views/dashboard/IndexChart.vue

@@ -1,137 +1,176 @@
 <template>
-  <div class="page-header-index-wide">
+  <div>
+    <!-- <a-row :gutter="24">
+      <a-col :span="12" :style="{ marginBottom: '24px' }" class="container gutter-row">
+        <chart-card >
+          <span>资产总数</span>
+        </chart-card>
+      </a-col>
+      <a-col :span="12" :style="{ marginBottom: '24px' }" class="container">
+        <chart-card>
+          <span>系统介绍</span>
+        </chart-card>
+      </a-col>
+    </a-row> -->
+     <a-row :gutter="24">
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card  title="成员访问次数" :total="cardCount.sll | NumberFormat">
+          <template slot="footer">今日访问量：<span>{{ todaySll }}</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card  title="办结量" :total="cardCount.bjl | NumberFormat">
+          <template slot="footer">今日办结量：<span>{{ todayBjl }}</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card  title="用户受理量" :total="cardCount.isll | NumberFormat">
+          <template slot="footer">用户今日受理量：<span>{{ todayISll }}</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card  title="用户办结量" :total="cardCount.ibjl | NumberFormat">
+          <template slot="footer">用户今日办结量：<span>{{ todayIBjl }}</span></template>
+        </chart-card>
+      </a-col>
+    </a-row>
 
+    <div class="container">
+    <div id="main" style="width: 600px; height: 400px" ></div>
+    <div id="pie" style="width: 600px; height: 400px" ></div>
+  </div>
   </div>
 </template>
 
 <script>
-  import ChartCard from '@/components/ChartCard'
+import ACol from "ant-design-vue/es/grid/Col"
-  import ACol from "ant-design-vue/es/grid/Col"
+import ChartCard from '@/components/ChartCard'
-  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
-  import MiniArea from '@/components/chart/MiniArea'
-  import MiniBar from '@/components/chart/MiniBar'
-  import MiniProgress from '@/components/chart/MiniProgress'
-  import RankList from '@/components/chart/RankList'
-  import Bar from '@/components/chart/Bar'
-  import LineChartMultid from '@/components/chart/LineChartMultid'
-  import HeadInfo from '@/components/tools/HeadInfo.vue'
 
-  import Trend from '@/components/Trend'
+export default {
-  import { getLoginfo,getVisitInfo } from '@/api/api'
+  components: {
+    ACol,
+    ChartCard,
+  },
+  data() {
+    return {
+      loading: true,
+      cardCount: {
+        sll: 100,
+        bjl: 87,
+        isll: 15,
+        ibjl: 9
+      },
 
-  const rankList = []
+      todaySll: 60,
-  for (let i = 0; i < 7; i++) {
+      todayBjl: 54,
-    rankList.push({
+      todayISll: 13,
-      name: '白鹭岛 ' + (i+1) + ' 号店',
+      todayIBjl: 7,
-      total: 1234.56 - i * 100
+
-    })
+      chartData: {
-  }
+        sll: [],
-  const barData = []
+        bjl: [],
-  for (let i = 0; i < 12; i += 1) {
+        isll: [],
-    barData.push({
+        ibjl: []
-      x: `${i + 1}月`,
-      y: Math.floor(Math.random() * 1000) + 200
-    })
-  }
-  export default {
-    name: "IndexChart",
-    components: {
-      ATooltip,
-      ACol,
-      ChartCard,
-      MiniArea,
-      MiniBar,
-      MiniProgress,
-      RankList,
-      Bar,
-      Trend,
-      LineChartMultid,
-      HeadInfo
-    },
-    data() {
-      return {
-        loading: true,
-        center: null,
-        rankList,
-        barData,
-        loginfo:{},
-        visitFields:['ip','visit'],
-        visitInfo:[],
-        indicator: <a-icon type="loading" style="font-size: 24px" spin />
-      }
-    },
-    created() {
-      setTimeout(() => {
-        this.loading = !this.loading
-      }, 1000)
-      this.initLogInfo();
-    },
-    methods: {
-      initLogInfo () {
-        getLoginfo(null).then((res)=>{
-          if(res.success){
-            Object.keys(res.result).forEach(key=>{
-              res.result[key] =res.result[key]+""
-            })
-            this.loginfo = res.result;
-          }
-        })
-        getVisitInfo().then(res=>{
-          if(res.success){
-             this.visitInfo = res.result;
-           }
-         })
       },
     }
-  }
+  },
+  methods: {
+    drawChart() {
+      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
+      let myChart = this.$echarts.init(document.getElementById("main"));
+      // 指定图表的配置项和数据
+      let option = {
+        title: {
+          text: "资产分布",
+        },
+        tooltip: {},
+        legend: {
+          data: ["资产数量"],
+        },
+        xAxis: {
+          data: ["理工一", "崇实楼", "行知楼", "理工二"],
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "资产数量",
+            type: "bar",
+            data: [5, 20, 36, 10],
+          },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+    drawPie() {
+      let myChart = this.$echarts.init(document.getElementById("pie"));
+
+
+
+      let option = {
+        title: {
+          text: "领用单位资产数统计",
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 706, name: '821501:终端室' },
+              { value: 761, name: '821502:微机室' },
+              { value: 97, name: '821503:硬件实验室' },
+              { value: 55, name: '821511:计算机总控室' },
+              { value: 180, name: '821512:12年前盘亏' }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+
+    }
+
+  },
+  mounted() {
+    this.drawChart();
+    this.drawPie();
+  },
+
+}
 </script>
 
 <style lang="less" scoped>
-  .circle-cust{
+.container {
-    position: relative;
+  // width: 100%;
-    top: 28px;
+  // height: 100%;
-    left: -100%;
+  display: flex;
-  }
-  .extra-wrapper {
-    line-height: 55px;
-    padding-right: 24px;
 
-    .extra-item {
+  background-color: #fff;
-      display: inline-block;
+  padding: 24px;
-      margin-right: 24px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
 
-      a {
+}
-        margin-left: 24px;
-      }
-    }
-  }
-
-  /* 首页访问量统计 */
-  .head-info {
-    position: relative;
-    text-align: left;
-    padding: 0 32px 0 0;
-    min-width: 125px;
-
-    &.center {
-      text-align: center;
-      padding: 0 32px;
-    }
-
-    span {
-      color: rgba(0, 0, 0, .45);
-      display: inline-block;
-      font-size: .95rem;
-      line-height: 42px;
-      margin-bottom: 4px;
-    }
-    p {
-      line-height: 42px;
-      margin: 0;
-      a {
-        font-weight: 600;
-        font-size: 1rem;
-      }
-    }
-  }
 </style>

src/views/dashboard/IndexTask.vue

@@ -1,5 +1,139 @@
 <template>
   <div class="index-container-ty">
+    <a-spin :spinning="loading">
+      <a-row type="flex" justify="start" :gutter="3">
+        <a-col :sm="24" :lg="12">
+          <a-card>
+            <div slot="title" class="index-md-title">
+              <img src="../../assets/daiban.png"/>
+              我的待办【{{ dataSource1.length }}】
+            </div>
+            <div slot="extra">
+              <a v-if="dataSource1 && dataSource1.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
+            </div>
+            <a-table
+              :class="'my-index-table tytable1'"
+              ref="table1"
+              size="small"
+              rowKey="id"
+              :columns="columns"
+              :dataSource="dataSource1"
+              :pagination="false">
+              <template slot="ellipsisText" slot-scope="text">
+                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
+              </template>
+
+              <template slot="dayWarnning" slot-scope="text,record">
+                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
+              </template>
+
+              <span slot="action" slot-scope="text, record">
+                <a @click="handleData">办理</a>
+              </span>
+
+            </a-table>
+          </a-card>
+        </a-col>
+
+        <a-col :sm="24" :lg="12">
+          <a-card>
+            <div slot="title" class="index-md-title">
+              <img src="../../assets/zaiban.png"/>
+              我的在办【{{ dataSource2.length }}】
+            </div>
+            <div slot="extra">
+              <a v-if="dataSource2 && dataSource2.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
+            </div>
+            <a-table
+              :class="'my-index-table tytable2'"
+              ref="table2"
+              size="small"
+              rowKey="id"
+              :columns="columns"
+              :dataSource="dataSource2"
+              :pagination="false">
+              <template slot="ellipsisText" slot-scope="text">
+                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
+              </template>
+
+              <template slot="dayWarnning" slot-scope="text,record">
+                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
+              </template>
+
+              <span slot="action" slot-scope="text, record">
+                <a @click="handleData">办理</a>
+              </span>
+
+            </a-table>
+          </a-card>
+        </a-col>
+
+        <a-col :span="24">
+          <div style="height: 5px;"></div>
+        </a-col>
+
+        <a-col :sm="24" :lg="12">
+          <a-card>
+            <div slot="title" class="index-md-title">
+              <img src="../../assets/guaz.png"/>
+              我的挂账【{{ dataSource4.length }}】
+            </div>
+            <a-table
+              :class="'my-index-table tytable4'"
+              ref="table4"
+              size="small"
+              rowKey="id"
+              :columns="columns"
+              :dataSource="dataSource4"
+              :pagination="false">
+              <template slot="ellipsisText" slot-scope="text">
+                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
+              </template>
+
+              <template slot="dayWarnning" slot-scope="text,record">
+                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
+              </template>
+
+              <span slot="action" slot-scope="text, record">
+                <a @click="handleData">办理</a>
+              </span>
+
+            </a-table>
+          </a-card>
+        </a-col>
+
+        <a-col :sm="24" :lg="12">
+          <a-card>
+            <div slot="title" class="index-md-title">
+              <img src="../../assets/duban.png"/>
+              我的督办【{{ dataSource3.length }}】
+            </div>
+            <a-table
+              :class="'my-index-table tytable3'"
+              ref="table3"
+              size="small"
+              rowKey="id"
+              :columns="columns"
+              :dataSource="dataSource3"
+              :pagination="false">
+              <template slot="ellipsisText" slot-scope="text">
+                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
+              </template>
+
+              <template slot="dayWarnning" slot-scope="text,record">
+                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
+              </template>
+
+              <span slot="action" slot-scope="text, record">
+                <a @click="handleData">办理</a>
+              </span>
+
+            </a-table>
+          </a-card>
+        </a-col>
+
+      </a-row>
+    </a-spin>
 
   </div>
 </template>

src/views/rms/LocationList/RmsLocationList.vue

@@ -1,92 +1,36 @@
 <template>
   <a-card :bordered="false">
-    <!-- 查询区域 -->
+    <!-- 表单结构 -->
-    <div class="table-page-search-wrapper">
+    <div class="page">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
+      <a-row>
-        <a-row :gutter="24">
+        <a-col :span="4" class="tree">
-        </a-row>
+          <locationaTree ref="locationaTree" :height="500" @onSelect="onSelect"></locationaTree>
-      </a-form>
+        </a-col>
-    </div>
+        <a-col :span="20" class="table">
-    <!-- 查询区域-END -->
 
-    <!-- 操作按钮区域 -->
+          <!-- 操作按钮区域 -->
-    <div class="table-operator">
+          <div class="table-operator" style="padding-bottom: 15px;">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+            <a-button @click="handleAdd" type="primary" icon="plus" style="float: right;">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('存放地表')">导出</a-button>
+            <a-dropdown v-if="selectedRowKeys.length > 0">
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+              <a-button key="1" @click="batchDel"><a-icon type="delete" />删除</a-button>
-        <a-button type="primary" icon="import">导入</a-button>
+            </a-dropdown>
-      </a-upload>
+          </div>
-      <!-- 高级查询区域 -->
+          <div style="padding-top: 15px;">
-      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+            <a-table ref="table" size="middle" :scroll="{ x: 600, y: 500 }" bordered rowKey="id" :columns="columns"
-      <a-dropdown v-if="selectedRowKeys.length > 0">
+              :dataSource="dataSource" :pagination="ipagination" :loading="loading"
-        <a-menu slot="overlay">
+              :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
-          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+              @change="handleTableChange">
-        </a-menu>
+              <span slot="action" slot-scope="text, record">
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+                <a @click="handleEdit(record)">编辑</a>
-      </a-dropdown>
+                <a-divider type="vertical" />
-    </div>
-
-    <!-- table区域-begin -->
-    <div>
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
-        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
-      </div>
-
-      <a-table
-        ref="table"
-        size="middle"
-        :scroll="{x:true}"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        class="j-table-force-nowrap"
-        @change="handleTableChange">
-
-        <template slot="htmlSlot" slot-scope="text">
-          <div v-html="text"></div>
-        </template>
-        <template slot="imgSlot" slot-scope="text,record">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
-        </template>
-        <template slot="fileSlot" slot-scope="text">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-          <a-button
-            v-else
-            :ghost="true"
-            type="primary"
-            icon="download"
-            size="small"
-            @click="downloadFile(text)">
-            下载
-          </a-button>
-        </template>
-
-        <span slot="action" slot-scope="text, record">
-          <a @click="handleEdit(record)">编辑</a>
-
-          <a-divider type="vertical" />
-          <a-dropdown>
-            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
-            <a-menu slot="overlay">
-              <a-menu-item>
-                <a @click="handleDetail(record)">详情</a>
-              </a-menu-item>
-              <a-menu-item>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                   <a>删除</a>
                 </a-popconfirm>
-              </a-menu-item>
+              </span>
-            </a-menu>
+            </a-table>
-          </a-dropdown>
+          </div>
-        </span>
+        </a-col>
-
+      </a-row>
-      </a-table>
     </div>
 
     <rms-location-modal ref="modalForm" @ok="modalFormOk"></rms-location-modal>
@@ -95,89 +39,100 @@
 
 <script>
 
-  import '@/assets/less/TableExpand.less'
+import '@/assets/less/TableExpand.less'
-  import { mixinDevice } from '@/utils/mixin'
+import { mixinDevice } from '@/utils/mixin'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import RmsLocationModal from './modules/RmsLocationModal'
+import RmsLocationModal from './modules/RmsLocationModal'
-
+import locationaTree from '../components/locationaTree'
-  export default {
-    name: 'RmsLocationList',
-    mixins:[JeecgListMixin, mixinDevice],
-    components: {
-      RmsLocationModal
-    },
-    data () {
-      return {
-        description: '存放地表管理页面',
-        // 表头
-        columns: [
-          {
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },
-          {
-            title:'存放地id',
-            align:"center",
-            dataIndex: 'locationId'
-          },
-          {
-            title:'存放地名称',
-            align:"center",
-            dataIndex: 'locationName'
-          },
-          {
-            title:'父节点id',
-            align:"center",
-            dataIndex: 'parentLocationId'
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:"center",
-            fixed:"right",
-            width:147,
-            scopedSlots: { customRender: 'action' }
-          }
-        ],
-        url: {
-          list: "/rms/rmsLocation/list",
-          delete: "/rms/rmsLocation/delete",
-          deleteBatch: "/rms/rmsLocation/deleteBatch",
-          exportXlsUrl: "/rms/rmsLocation/exportXls",
-          importExcelUrl: "rms/rmsLocation/importExcel",
 
+export default {
+  name: 'RmsLocationList',
+  mixins: [JeecgListMixin, mixinDevice],
+  components: {
+    RmsLocationModal,
+    locationaTree
+  },
+  data() {
+    return {
+      description: '存放地表管理页面',
+      // 表头
+      columns: [
+        {
+          title: '地址ID',
+          align: "center",
+          dataIndex: 'id'
         },
-        dictOptions:{},
+        {
-        superFieldList:[],
+          title: '存放地址',
-      }
+          align: "center",
-    },
+          dataIndex: 'locationName'
-    created() {
+        },
-    this.getSuperFieldList();
+        {
-    },
+          title: '排序号',
-    computed: {
+          align: "center",
-      importExcelUrl: function(){
+          dataIndex: 'sortNumber'
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+        },
+        {
+          title: '父级存放地址',
+          align: "center",
+          dataIndex: 'parentLocationId'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: "center",
+          fixed: "right",
+          width: 147,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: "/rms/rmsLocation/list",
+        delete: "/rms/rmsLocation/delete",
+        deleteBatch: "/rms/rmsLocation/deleteBatch",
+        exportXlsUrl: "/rms/rmsLocation/exportXls",
+        importExcelUrl: "rms/rmsLocation/importExcel",
+
       },
-    },
+      dictOptions: {},
-    methods: {
+      superFieldList: [],
-      initDictConfig(){
-      },
-      getSuperFieldList(){
-        let fieldList=[];
-        fieldList.push({type:'string',value:'locationId',text:'存放地id',dictCode:''})
-        fieldList.push({type:'string',value:'locationName',text:'存放地名称',dictCode:''})
-        fieldList.push({type:'string',value:'parentLocationId',text:'父节点id',dictCode:''})
-        this.superFieldList = fieldList
-      }
     }
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+    },
+  },
+  methods: {
+    onSelect(selectedRowKeys) {
+      //将其切分为字符串
+      selectedRowKeys = selectedRowKeys.join(',')
+      console.log(selectedRowKeys)
+      this.queryParam.id = selectedRowKeys
+      this.loadData()
+    },
+    modalFormOk() {
+      this.$refs.locationaTree.getTreeData()
+      // 新增/修改 成功时，重载列表
+      this.loadData();
+      //清空列表选中
+      this.onClearSelected()
+    },
   }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
+@import '~@assets/less/common.less';
+
+.page {
+  height: 600px;
+
+  .tree {
+    height: 500px;
+  }
+
+  .table {
+    height: 500px;
+  }
+}
 </style>

src/views/rms/LocationList/modules/RmsLocationForm.vue

@@ -4,18 +4,19 @@
       <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
         <a-row>
           <a-col :span="24">
-            <a-form-model-item label="存放地id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="locationId">
+            <a-form-model-item label="存放地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="locationName">
-              <a-input v-model="model.locationId" placeholder="请输入存放地id"  ></a-input>
+              <a-input v-model="model.locationName" placeholder="请输入存放地址"></a-input>
             </a-form-model-item>
           </a-col>
           <a-col :span="24">
-            <a-form-model-item label="存放地名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="locationName">
+            <a-form-model-item label="父级存放地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="parentLocationId">
-              <a-input v-model="model.locationName" placeholder="请输入存放地名称"  ></a-input>
+              <a-cascader :options="treeData" placeholder="请选择父级存放地址" @change="onChange"
+                :changeOnSelect="true"></a-cascader>
             </a-form-model-item>
           </a-col>
           <a-col :span="24">
-            <a-form-model-item label="父节点id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="parentLocationId">
+            <a-form-model-item label="排序号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sortNumber">
-              <a-input v-model="model.parentLocationId" placeholder="请输入父节点id"  ></a-input>
+              <a-input v-model="model.sortNumber" placeholder="请输入排序号"></a-input>
             </a-form-model-item>
           </a-col>
         </a-row>
@@ -26,89 +27,102 @@
 
 <script>
 
-  import { httpAction, getAction } from '@/api/manage'
+import { httpAction, getAction } from '@/api/manage'
-  import { validateDuplicateValue } from '@/utils/util'
 
-  export default {
+export default {
-    name: 'RmsLocationForm',
+  name: 'RmsLocationForm',
-    components: {
+  components: {
-    },
+  },
-    props: {
+  props: {
-      //表单禁用
+    //表单禁用
-      disabled: {
+    disabled: {
-        type: Boolean,
+      type: Boolean,
-        default: false,
+      default: false,
-        required: false
+      required: false
-      }
-    },
-    data () {
-      return {
-        model:{
-         },
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-        confirmLoading: false,
-        validatorRules: {
-        },
-        url: {
-          add: "/rms/rmsLocation/add",
-          edit: "/rms/rmsLocation/edit",
-          queryById: "/rms/rmsLocation/queryById"
-        }
-      }
-    },
-    computed: {
-      formDisabled(){
-        return this.disabled
-      },
-    },
-    created () {
-       //备份model原始值
-      this.modelDefault = JSON.parse(JSON.stringify(this.model));
-    },
-    methods: {
-      add () {
-        this.edit(this.modelDefault);
-      },
-      edit (record) {
-        this.model = Object.assign({}, record);
-        this.visible = true;
-      },
-      submitForm () {
-        const that = this;
-        // 触发表单验证
-        this.$refs.form.validate(valid => {
-          if (valid) {
-            that.confirmLoading = true;
-            let httpurl = '';
-            let method = '';
-            if(!this.model.id){
-              httpurl+=this.url.add;
-              method = 'post';
-            }else{
-              httpurl+=this.url.edit;
-               method = 'put';
-            }
-            httpAction(httpurl,this.model,method).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.$emit('ok');
-              }else{
-                that.$message.warning(res.message);
-              }
-            }).finally(() => {
-              that.confirmLoading = false;
-            })
-          }
-         
-        })
-      },
     }
+  },
+  data() {
+    return {
+      model: {
+      },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      confirmLoading: false,
+      validatorRules: {
+        locationName: [{ required: true, message: '请输入存放地址', trigger: 'blur' },],
+      },
+      url: {
+        add: "/rms/rmsLocation/add",
+        edit: "/rms/rmsLocation/edit",
+        queryById: "/rms/rmsLocation/queryById"
+      },
+      treeData: [],
+      getTreeUrl: '/rms/rmsLocation/getCascader'
+    }
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled
+    },
+  },
+  created() {
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+    this.getTreeData();
+  },
+  methods: {
+    getTreeData() {
+      getAction(this.getTreeUrl, {}).then(res => {
+        if (res.success) {
+          this.treeData = res.result;
+        }
+      });
+    },
+    add() {
+      this.edit(this.modelDefault);
+    },
+    edit(record) {
+      this.model = Object.assign({}, record);
+      this.visible = true;
+    },
+    onChange(value) {
+      this.model.parentLocationId = value[value.length - 1];
+    },
+    submitForm() {
+      const that = this;
+      // 触发表单验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          that.confirmLoading = true;
+          let httpurl = '';
+          let method = '';
+          if (!this.model.id) {
+            httpurl += this.url.add;
+            method = 'post';
+          } else {
+            httpurl += this.url.edit;
+            method = 'put';
+          }
+          httpAction(httpurl, this.model, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message);
+              that.$emit('ok');
+            } else {
+              that.$message.warning(res.message);
+            }
+          }).finally(() => {
+            that.confirmLoading = false;
+          })
+        }
+
+      })
+    },
   }
+}
 </script>

yarn.lock

@@ -4573,6 +4573,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
+  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.4"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -11019,6 +11027,11 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.10.0, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
@@ -12081,3 +12094,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@5.4.4:
+  version "5.4.4"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
+  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+  dependencies:
+    tslib "2.3.0"