暂存

src/HDrpManagement/invoicePredictionManage/details/index.vue

@@ -1,13 +1,343 @@
 <template>
-5555
+  <div>
+    <newDetails :titleText="mainData.title" :mainAreaData="mainAreaData" idname="sa_salesforecastbillid" :editData="mainData">
+      <template #bottomLeft>
+        <div style="height: calc(96vh)">
+          <p>预测单汇总</p>
+          <el-divider></el-divider>
+          <el-row>
+            <el-col :span="24">
+              <div class="mt-10" style="float: left">
+                <label  class="search__label" >范围:</label>
+                <el-popover
+                    placement="bottom"
+                    v-model="visible"
+                    :stretch="true"
+                    trigger="click">
+                  <el-tabs v-model="activeName" @tab-click="handleClick">
+                    <el-tab-pane label="部门" name="部门">
+                      <el-cascader-panel ref="selectdep" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep"  clearable></el-cascader-panel>
+                    </el-tab-pane>
+                    <el-tab-pane label="人员" name="人员">
+                      <el-cascader-panel ref="selectPerson" :options="personnelList" :props="{label:'name',value:'userid'}"   @change="selectPerson"  clearable></el-cascader-panel>
+                    </el-tab-pane>
+                  </el-tabs>
+                  <el-input style="width: 200px" size="small" slot="reference" v-model="range" placeholder="请选择" @input="departmentrtment" @change="onChange" clearable></el-input>
+                </el-popover>
+              </div>
+              <el-button style="float: right" size="small" type="primary" @click="updateData">更新数据</el-button>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <div class="totalData">
+                <el-row>
+                  <el-col :offset="1" :span="10">
+                    <span class="title">预测人数：</span>
+                    <span class="num">{{allhr}}</span>
+                  </el-col>
+                  <el-col :span="11">
+                    <span class="title">出货预测总金额：</span>
+                    <span class="amount">¥{{tool.formatAmount(allorderoutamount,2)}}</span>
+                  </el-col>
+                  <el-col :offset="1" :span="11">
+                    <span class="title">开票预测总金额：</span>
+                    <span class="amount">¥{{tool.formatAmount(allorderinvoamount,2)}}</span>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-row :span="24">
+              <tableList :loading="loading" :layout="tablecols" :data="list" :opwidth="200" :custom="true"  :height="tableHieght" fixedName="operation">
+                <template v-slot:customcol="scope">
+                  <div v-if="scope.column.columnname === 'operation'">
+                    <span>{{scope.column.data[scope.column.columnname]}}</span>
+                  </div>
+                  <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
+                </template>
+                <template v-slot:opreation="scope">
+                  <el-button size="mini" type="text" v-if="scope.data.sa_salesforecastbillid" @click="goDetail(scope.data)">详 情</el-button>
+                </template>
+              </tableList>
+            </el-row>
+          </el-row>
+
+        </div>
+      </template>
+      <template #bottomRight>
+        <div style="height:60px;padding: -16px;margin: 0">
+          <p>我的预测单</p>
+          <el-divider></el-divider>
+          <el-descriptions :column="4" size="small">
+            <el-descriptions-item label-class-name="my-label-layout" content-class-name="my-content" v-for="item in myData" :key="item.index" :label="item.label"><span :style="item.style?item.style():''">{{item.value !== ''?item.value:'--'}}</span></el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </template>
+    </newDetails>
+  </div>
 </template>
 
 <script>
+import newDetails from '@/components/newDetailTemp/index'
+import tableList from '@/components/table/index5'
 export default {
-  name: "index"
+  name: "index",
+  components:{newDetails,tableList},
+  data(){
+    return {
+      id:'',
+      drawer:false,
+      mainAreaData:'',
+      loading:'',
+      mainData:"",
+      myData:[],
+      tablecols:[],
+      list:[],
+      allhr:"",
+      allorderinvoamount:"",
+      allorderoutamount:"",
+      total:0,
+      currentPage:0,
+      param:{
+        "id": 20230705144804,
+        "content": {
+          "type":1,
+          "dataid":0,
+          "baseonproject":0,
+          "title":""
+        }
+      },
+      isDep:false,
+      isPerson:false,
+      activeName: '部门',
+      dataid:'',
+      range:'',
+      pointValue:'',
+      visible:false,
+      deplist:[],
+      personnelList:[],
+      depmentParam:{
+        "id": 20230620102004,
+        "content": {
+        }
+      },
+    }
+  },
+  methods:{
+    async queryMainData () {
+      const res = await this.$api.requested({
+        "id": 20230705144704,
+        "content": {
+          "sa_salesforecastbillid":this.$route.query.id
+        }
+      })
+      console.log(res.data,'1111')
+      this.mainData = res.data
+      this.changeDataStructure()
+      this.listData()
+      this.departmentrtment()
+    },
+    changeDataStructure () {
+      let that = this
+      this.mainAreaData = [
+        {
+          label:'标题',
+          value: this.mainData.title
+        },
+        {
+          label:'预测时间',
+          value: this.mainData.periodstart + '至' + this.mainData.periodend
+        },
+        {
+          label:'状态',
+          value: this.mainData.status,
+          style: ()=> {
+            let style = {}
+            switch (that.mainData.status) {
+              case '进行中':
+                style = {color:'#00B32B'}
+                break;
+              default:
+                break;
+            }
+            return style
+          }
+        },
+      ]
+      this.myData = [
+        {
+          label:'单号',
+          value: this.mainData.billnum
+        },
+        {
+          label:'预测人',
+          value: this.mainData.name
+        },
+        {
+          label:'出货预测金额',
+          value: this.tool.formatAmount(this.mainData.orderoutamount,2)
+        },
+        {
+          label:'开票预测金额',
+          value: this.tool.formatAmount(this.mainData.orderinvoamount,2)
+        },
+      ]
+    },
+    async listData(){
+      this.param.content.title = this.mainData.title
+      const res = await this.$api.requested(this.param)
+      this.list = res.data.data
+      this.allhr = res.data.allhr
+      this.allorderinvoamount = res.data.allorderinvoamount
+      this.allorderoutamount = res.data.allorderoutamount
+      this.loading = false
+    },
+    async departmentrtment() {
+      const res = await this.$api.requested(this.depmentParam)
+      this.deplist = this.createMenu(res.data.dep)
+      this.personnelList = res.data.hr
+      /* this.range = JSON.parse(window.sessionStorage.getItem('active_account')).name*/
+    },
+    createMenu (array) {
+      var that = this
+      let arr = []
+      function convertToElementTree(node) {
+        // 新节点
+        if (node.subdep.length === 0){
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            disabled:that.pageOnlyRead,
+          }
+        }else {
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            disabled:that.pageOnlyRead,
+            children: []
+          }
+        }
+        if (node.subdep && node.subdep.length > 0) {
+          // 如果存在子节点
+          for (var index = 0; index < node.subdep.length; index++) {
+            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
+            elNode.children.push(convertToElementTree(node.subdep[index]));
+          }
+        }
+        return elNode;
+      }
+      array.forEach((element) => {
+        arr.push(convertToElementTree(element))
+      });
+      return arr
+    },
+    selectDep(val) {
+      let dataDep = this.$refs.selectdep.getCheckedNodes(true)[0].data
+      this.range = dataDep.label
+      this.isDep = true
+      this.isPerson = false
+      this.dataid = val[val.length -1]
+      this.param.content.type = 1
+      this.param.content.dataid = this.dataid
+      this.visible = false
+      this.listData()
+      /*this.$refs.selectPerson.clearCheckedNodes()*/
+    },
+    selectPerson(val){
+      let dataperson = this.$refs.selectPerson.getCheckedNodes(true)[0].data
+      this.range = dataperson.name
+      this.isDep = false
+      this.isPerson = true
+
+      this.dataid = val[val.length-1]
+      this.param.content.type = 0
+      this.param.content.dataid = this.dataid
+      this.visible = false
+      this.listData()
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    updateData(){
+      /* this.param.content.type = 1
+       this.param.content.dataid = 0
+       this.range = ''*/
+      this.loading = true
+      this.listData()
+    },
+    onChange(){
+      if (this.range == ''){
+        this.param.content.type = 1
+        this.param.content.dataid = 0
+        this.range = ''
+        this.listData()
+      }
+    },
+    onSuccess(){
+      this.queryMainData()
+    },
+    goDetail(val){
+      console.log(val)
+      this.id = val.sa_salesforecastbillid
+      this.drawer = true
+    }
+  },
+  mounted() {
+    this.queryMainData()
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).invoiceManageTotal.tablecols
+  },
 }
 </script>
 
 <style scoped>
-
+/deep/ .el-divider--horizontal {
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin: 10px 0;
+}
+.totalData{
+  height: 60px;
+  width: 100%;
+  background: #f5f5f5;
+  margin-bottom: 10px;
+  vertical-align: auto;
+  line-height: 30px;
+}
+.totalData .title{
+  color:#888;
+  font-size: 12px
+}
+.totalData .num{
+  color: #333;
+  font-size: 16px;
+}
+.totalData .amount{
+  color: #E13333;
+  font-size: 16px;
+}
 </style>

src/HDrpManagement/invoicePredictionManage/index.vue

@@ -56,7 +56,7 @@
         </p>
       </template>
       <template v-slot:tbOpreation="scope">
-
+        <edit :data="scope.data.data"></edit>
       </template>
     </basicLayout>
   </div>

src/HDrpManagement/invoicePredictionManage/modules/edit.vue

@@ -7,10 +7,11 @@
 <script>
 export default {
   name: "edit",
+  props:["data"],
   methods:{
     onShow(){
       let query = {id:this.data.sa_salesforecastbillid,rowindex:this.data.rowindex}
-      this.$router.push({path:'/invoicePredictionManageDetail',query:query})
+      this.$router.push({path:'/invoiceManageDetail',query:query})
       this.$store.dispatch('changeDetailDrawer',true)
     },
   }

src/router/HDrpManagement.js

@@ -1092,7 +1092,7 @@ const HDrpManagement = [
     component: () => import(/* webpackChunkName: "about" */ '@/HDrpManagement/invoicePredictionManage/index'),
     children: [
       {
-        path: '/invoicePredictionManageDetail',
+        path: '/invoiceManageDetail',
         name: 'invoicePredictionManage',
         meta: {
           title: '出货开票预测管理详情',

src/router/SDrpManagement.js

@@ -296,18 +296,6 @@ const SDrpManagement = [
       keeproute: true,
     },
     component: () => import(/* webpackChunkName: "about" */ '@/SDrpManagement/projectPrediction/index'),
-    children: [
-      {
-        path: '/projectPredictionDetail',
-        name: 'projectPrediction',
-        meta: {
-          title: '项目成交预测详情',
-          ast_nav: true,
-          keeproute: true,
-        },
-        component: () => import(/* webpackChunkName: "about" */ '@/SDrpManagement/projectPrediction/detail/index'),
-      }
-    ]
   },
   {
     path: '/invoicePrediction',