zhangzl
/
nsgk_agentcenter_front
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
代理记账中共新前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
16 Commitit
1 Haara
1.7 MiB
 
 
 
 
Puu: 2c95f6e1d7
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '2c95f6e1d7'
${ noResults }
nsgk_agentcenter_front/src/views/processing/processing.vue

549 rivejä
14 KiB
Raaka Blame Historia 

  1. <template>

  2.   <div class="app-container">

  3. 

  4.     <div class="header_main">

  5. 

  6.       <el-dropdown trigger="click" placement="bottom-start">

  7.         <div class="select_address el-dropdown-link">

  8.           <span class="sanjiao-right"></span>

  9.           <p>{{cityName}}</p>

  10.         </div>

  11.         <el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;">

  12.           <el-dropdown-item v-for="(item,index) in deptOptions" :command="item.orgCode">

  13.             <div class="selected" @click="chooseCity(item.orgCode)">

  14.               <p>{{item.deptName}}</p>

  15.             </div>

  16.           </el-dropdown-item>

  17.         </el-dropdown-menu>

  18.       </el-dropdown>

  19. 

  20.       <el-dropdown trigger="click" placement="bottom-start">

  21.         <div class="select_address el-dropdown-link">

  22.           <span class="sanjiao-right"></span>

  23.           <p>{{townName}}</p>

  24.         </div>

  25.         <el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;">

  26.           <el-dropdown-item v-for="(item,index) in townList" :command="item.orgCode">

  27.             <div class="selected" @click="chooseTown(item.orgCode)">

  28.               <p>{{item.deptName}}</p>

  29.             </div>

  30.           </el-dropdown-item>

  31.         </el-dropdown-menu>

  32.       </el-dropdown>

  33. 

  34.       <p class="todo_num">剩余镇：<span>{{ countySummary.numTown }}</span>个</p>

  35.       <p class="todo_num1">剩余村庄：<span>{{ countySummary.numVillage }}</span>个</p>

  36.       <p class="todo_num1">剩余合作社：<span>{{ countySummary.numBook }}</span>个</p>

  37.       <p class="todo_num2">任务异常数：<span>{{ countySummary.abnormalCount }}</span>个</p>

  38. 

  39.     </div>

  40. 

  41.     <div class="main">

  42. 

  43.       <div class="left_main">

  44.         <el-collapse accordion>

  45.           <el-collapse-item v-for="(item,index) in list" :key="index">

  46.             <template slot="title">

  47.               <div class="left_main_tt">

  48.                 <p>东沙镇</p>

  49.                 <div class="tt_label">

  50.                   <p>异常：{{item.numExcept}}</p>

  51.                   <p>剩余村庄：{{item.numVillage}}</p>

  52.                   <p>剩余合作社：{{item.num}}</p>

  53.                 </div>

  54.               </div>

  55.             </template>

  56.             <el-table :data="item.villageList" style="width: 100%;">

  57. 

  58.               <el-table-column type="expand">

  59.                 <template slot-scope="props">

  60.                   <div class="openTable">

  61.                     <el-row v-for="(task,index) in props.row.taskList" :key="index">

  62.                       <el-col :span="9">

  63.                         <div class="tab_main">

  64.                           {{task.bookName}}

  65.                           <span class="tab_red" v-if="task.abnormalCount > 0">异常:{{task.abnormalCount}}</span>

  66.                         </div>

  67.                       </el-col>

  68.                       <el-col :span="2">记账：{{task.voucherCount}}</el-col>

  69.                       <el-col :span="2">合同：{{task.contracCount}}</el-col>

  70.                       <el-col :span="2">其他：{{task.otherCount}}</el-col>

  71.                       <el-col :span="9" style="text-align: right"><el-button type="primary" size="mini" @click="gotoRemoteSite(task)">进入账套</el-button></el-col>

  72.                     </el-row>

  73.                   </div>

  74.                 </template>

  75.               </el-table-column>

  76. 

  77.               <el-table-column prop="orgName" label="村" show-overflow-tooltip />

  78.               <el-table-column prop="num" label="合作社" show-overflow-tooltip />

  79.               <el-table-column label="处理进度" show-overflow-tooltip>

  80.                 <template slot-scope="scope">

  81.                   {{scope.row.numProcessFinish}}/{{scope.row.num}}

  82.                 </template>

  83.               </el-table-column>

  84.               <el-table-column prop="numExcept" label="异常任务" show-overflow-tooltip >

  85.                 <template slot-scope="scope">

  86.                   {{scope.row.numExcept || '无'}}

  87.                 </template>

  88.               </el-table-column>

  89.               <el-table-column prop="value5" label="任务进度" show-overflow-tooltip >

  90.                 <template slot-scope="scope">

  91.                   {{scope.row.finishCount}}/{{scope.row.allCount}}

  92.                 </template>

  93.               </el-table-column>

  94.               <el-table-column prop="handleNick" label="会计" show-overflow-tooltip />

  95.               <el-table-column prop="distriDate" label="下发日期" show-overflow-tooltip />

  96.               <el-table-column prop="endAt" label="截至日期" show-overflow-tooltip />

  97.               <el-table-column label="操作" show-overflow-tooltip >

  98.                 <template slot-scope="scope">

  99.                   <p class="backButton" @click="revokeVillageTask(scope.row)">撤回</p>

  100.                 </template>

  101.               </el-table-column>

  102. 

  103.             </el-table>

  104.           </el-collapse-item>

  105.         </el-collapse>

  106. 

  107.       </div>

  108. 

  109.       <RightYearMonthSelector class="right_main" :year.sync="parms.orderYear" :month.sync="parms.orderMonth" @dateChanged="chooseMonth"/>

  110. 

  111.     </div>

  112. 

  113. 

  114.   </div>

  115. </template>

  116. 

  117. <script>

  118. import RightYearMonthSelector from "@/components/framework/RightYearMonthSelector.vue";

  119. import {date_format} from "@/utils/date";

  120. import {cityTree} from "@/api/misc/misc_dept";

  121. import {ENV} from "@/utils/env";

  122. import {managerProcessingTaskList, managerCountyProcessingTaskSummary, revokeTask} from "@/api/agentcenter/task";

  123. 

  124. export default {

  125.   name: "processing",

  126.   components: {RightYearMonthSelector},

  127.   data() {

  128.     return {

  129.       deptOptions: [],

  130.       list: [],

  131.       total: 0,

  132.       parms: {

  133.         countyCode: null,

  134.         townCode: null,

  135.         orderYear: date_format('%Y'),

  136.         orderMonth: date_format('%m'),

  137.       },

  138.       countySummary: {

  139.         numTown: 0,

  140.         numBook: 0,

  141.         abnormalCount: 0,

  142.         numVillage: 0,

  143.       }

  144.     }

  145.   },

  146.   created() {

  147.     this.getDeptTree();

  148.   },

  149.   methods:{

  150.     getDeptTree() {

  151.       cityTree({rootId: ENV.UserDeptId()}).then((resp) => {

  152.         this.deptOptions = resp.data;

  153.         if(this.deptOptions.length)

  154.         {

  155.           this.parms.countyCode = this.deptOptions[0].orgCode;

  156.           this.getSummary();

  157.           this.getTaskList();

  158.         }

  159.       });

  160.     },

  161.     getTaskList() {

  162.       if(!this.parms.countyCode || !this.parms.orderYear || !this.parms.orderMonth)

  163.         return;

  164.       managerProcessingTaskList(this.parms).then((resp) => {

  165.         this.list = resp.rows;

  166.         this.total = resp.total;

  167.       })

  168.     },

  169.     chooseCity(cmd) {

  170.       this.parms.countyCode = cmd;

  171.       this.parms.townCode = null;

  172.       this.getTaskList();

  173.       this.getSummary();

  174.     },

  175.     chooseTown(cmd) {

  176.       this.parms.townCode = cmd;

  177.       this.getTaskList();

  178.     },

  179.     chooseMonth(year, month) {

  180.       this.getSummary();

  181.       this.getTaskList();

  182.     },

  183.     gotoRemoteSite(task) {

  184.       window.open(`/api/open/book/${task.orgCode}/${task.bookId}`, '_blank');

  185.     },

  186.     getSummary() {

  187.       if(!this.parms.countyCode || !this.parms.orderYear || !this.parms.orderMonth)

  188.         return;

  189.       managerCountyProcessingTaskSummary(this.parms).then((resp) => {

  190.         this.countySummary = resp.data;

  191.       })

  192.     },

  193.     revokeVillageTask(row) {

  194.       revokeTask({

  195.         orderYear: row.orderYear,

  196.         orderMonth: row.orderMonth,

  197.         orgCode: row.orgCode,

  198.       }).then((resp) => {

  199.         this.$message.success('撤回成功');

  200.         this.getSummary();

  201.         this.getTaskList();

  202.       });

  203.     },

  204.   },

  205.   mounted(){

  206. 

  207.   },

  208.   computed: {

  209.     cityName() {

  210.       if(!this.deptOptions.length)

  211.         return '';

  212.       let dept = this.deptOptions.find((x) => x.orgCode === this.parms.countyCode);

  213.       return dept ? dept.deptName : '';

  214.     },

  215.     townList() {

  216.       if(!this.deptOptions.length)

  217.         return [];

  218.       let dept = this.deptOptions.find((x) => x.orgCode === this.parms.countyCode);

  219.       return dept ? dept.children || [] : [];

  220.     },

  221.     townName() {

  222.       if(!this.townList.length)

  223.         return '';

  224.       let dept = this.townList.find((x) => x.orgCode === this.parms.townCode);

  225.       return dept ? dept.deptName : '';

  226.     },

  227.   },

  228. }

  229. </script>

  230. 

  231. <style lang="scss" scoped>

  232.   p{margin: 0;line-height: 1;}

  233.   .app-container{

  234.     background-color: #f5f6f8;

  235.     width: 100%;

  236.     height: 91vh;

  237.   }

  238. 

  239.   .selected{

  240.     display: flex;

  241.     height: 4vh;

  242.     p{

  243.       width: 8vw;

  244.       line-height: 4vh;

  245.       text-align: center;

  246.     }

  247.   }

  248.   .pickerTime{

  249.     opacity: 0;

  250.     position: absolute;

  251.     left: 0px;

  252.     top: 30px;

  253.     width: 5px;

  254.     height: 5px;

  255.     z-index: -1;

  256.   }

  257.   .el-dropdown-link {

  258.     cursor: pointer;

  259.   }

  260. 

  261.   .title{

  262.     display: flex;

  263.     align-items: center;

  264.     i{

  265.       display: inline-block;

  266.       width: 5px;

  267.       height: 20px;

  268.       background: #4d7cfe;

  269.       border-radius: 5px;

  270.       margin-right: 10px;

  271.     }

  272.     p{

  273.       font-size: 16px;

  274.     }

  275.   }

  276. 

  277.   ::v-deep .el-collapse {

  278.     border: none;

  279.   }

  280. 

  281.   ::v-deep .el-collapse-item__header {

  282.     border: none;

  283.   }

  284. 

  285.   ::v-deep .el-collapse-item__content {

  286.     background-color: #e2ebff;

  287.   }

  288. 

  289.   ::v-deep .el-table__expanded-cell {

  290.     background-color: #e2ebff;

  291.   }

  292. 

  293.   ::v-deep .el-table {

  294.     background-color: transparent;

  295.   }

  296. 

  297.   ::v-deep .el-table .cell{

  298.     text-align: center;

  299.   }

  300. 

  301.   ::v-deep .el-table .el-table__cell{

  302.     border: none!important;

  303.   }

  304.   ::v-deep .el-table::before{

  305.     display: none;

  306.   }

  307.   ::v-deep .el-table .el-table__header-wrapper th{

  308.     background-color: transparent;

  309.   }

  310.   ::v-deep .el-table tr{

  311.     background-color: transparent;

  312.   }

  313. 

  314.   .openTable{

  315.     padding: 1vh 2vw;

  316.     background-color: #ffffff;

  317.     border-radius: 15px;

  318.     overflow: hidden;

  319.     width: calc(100% - 40px);

  320.     margin: 0 auto;

  321.     .num{

  322.       color: #3976ff;

  323.       display: inline-block;

  324.       background-color: #e2ebff;

  325.       width: 1.8vw;

  326.       border-radius: 5px;

  327.       margin-left: 5px;

  328.     }

  329.     .el-col{

  330.       padding: 10px 0;

  331.     }

  332.     .tab_main{

  333.       display: flex;

  334.       span{

  335.         color: #ffffff;

  336.         background-color: #acabab;

  337.         padding: 2px 0px;

  338.         width: 4vw;

  339.         display: inline-block;

  340.         border-radius: 7px;

  341.         margin-right: 1vw;

  342.         text-align: center;

  343.       }

  344.       .tab_green{

  345.         background-color: #209955;

  346.       }

  347.       .tab_red{

  348.         background-color: #ef0027;

  349.       }

  350.     }

  351.   }

  352. 

  353.   .header_main{

  354.     display: flex;

  355.     align-items: center;

  356.     position: relative;

  357.     .selected{

  358.       width: 16vw;

  359.       background-color: #ffffff;

  360.       position: absolute;

  361.       top: 4vh;

  362.       left: 10vw;

  363.       z-index: 9;

  364.       border-radius: 8px;

  365.       box-shadow: 0 10px 10px #dedfe1;

  366.       padding: 1vh 0;

  367.       div{

  368.         display: flex;

  369.         height: 4vh;

  370.         p{

  371.           width: 8vw;

  372.           line-height: 4vh;

  373.           text-align: center;

  374.         }

  375.       }

  376.     }

  377.     .select_address{

  378.       display: flex;

  379.       align-items: center;

  380.       justify-content: center;

  381.       margin-right: 2vw;

  382.       background-color: #ffffff;

  383.       padding: 0px 0px;

  384.       border-radius: 8px;

  385.       box-shadow: 0 0 10px #dedfe1;

  386.       width: 8vw;

  387.       height: 4vh;

  388.       overflow: hidden;

  389.       &:nth-child(2){

  390.         margin-right: 0vw;

  391.       }

  392.       &:nth-child(3){

  393.         margin-right: 0vw;

  394.         border-top-left-radius: initial;

  395.         border-bottom-left-radius: initial;

  396.       }

  397.       .sanjiao-right {

  398.         display: inline-block;

  399.         border-left: 8px solid #000;

  400.         border-left-color: initial;

  401.         border-top: 5px solid transparent;

  402.         border-bottom: 5px solid transparent;

  403.         margin-right: 5px;

  404.       }

  405.       .select_time{

  406.         text-align: center;

  407.         width: 100%;

  408.         height: 4vh;

  409.         line-height: 4vh;

  410.         background-color: #3976ff;

  411.         color: #ffffff;

  412.       }

  413.     }

  414.     .todo_num{

  415.       margin-left: auto;

  416.       span{

  417.         font-size: 24px;

  418.         color: #3976ff;

  419.       }

  420.     }

  421.     .todo_num1{

  422.       margin-left: 2vw;

  423.       span{

  424.         font-size: 24px;

  425.         color: #3976ff;

  426.       }

  427.     }

  428.     .todo_num2{

  429.       margin-left: 2vw;

  430.       span{

  431.         font-size: 24px;

  432.         color: #ef0027;

  433.       }

  434.     }

  435.   }

  436. 

  437.   .main{

  438.     display: flex;

  439.     .left_main{

  440.       width: 92%;

  441.       margin-right: 0.57%;

  442.       margin-top: 15px;

  443.       border-radius: 8px;

  444.       box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);

  445.       background: #fff;

  446.       padding: 15px 20px;

  447.       height: calc(91vh - 91px);

  448.       .backButton{

  449.         color: #3976ff;

  450.         border-bottom: 1px solid #3976ff;

  451.         display: inline-block;

  452.         padding-bottom: 5px;

  453.         cursor: pointer;

  454.       }

  455.       .left_main_tt{

  456.         flex: 1;

  457.         display: flex;

  458.         align-items: center;

  459.         justify-content: space-between;

  460.         .tt_label{

  461.           display: flex;

  462.           align-items: center;

  463.           p{

  464.             margin-right: 2vw;

  465.             &:nth-child(1){

  466.               color: #ef0027;

  467.             }

  468.           }

  469.         }

  470.       }

  471.     }

  472. 

  473.     .right_main{

  474.       width: 7.43%;

  475.       margin-top: 15px;

  476.       border-radius: 8px;

  477.       box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);

  478.       background: #fff;

  479.       padding: 15px 20px;

  480.       height: calc(91vh - 91px);

  481.     }

  482. 

  483.   }

  484. 

  485.   .sanjiao-top {

  486.     display: inline-block;

  487.     border-bottom: 8px solid #414141;

  488.     border-bottom-color: initial;

  489.     border-left: 5px solid transparent;

  490.     border-right: 5px solid transparent;

  491.   }

  492. 

  493.   .sanjiao-bottom {

  494.     display: inline-block;

  495.     border-top: 8px solid #414141;

  496.     border-top-color: initial;

  497.     border-left: 5px solid transparent;

  498.     border-right: 5px solid transparent;

  499.   }

  500. 

  501.   .time_main{

  502.     display: flex;

  503.     flex-direction: column;

  504.     align-items: center;

  505.     background-color: #f5f6f8;

  506.     color: #414141;

  507.     width: 75%;

  508.     margin: 0 auto;

  509.     margin-top: 15px;

  510.     padding: 15px 0;

  511.     border-radius: 8px;

  512.     position: relative;

  513.     cursor: pointer;

  514.     p{

  515.       margin: 10px 0;

  516.     }

  517.   }

  518. 

  519.   .month_main{

  520.     display: flex;

  521.     flex-direction: column;

  522.     align-items: center;

  523.     color: #414141;

  524.     p{

  525.       margin-top: 3vh;

  526.       position: relative;

  527.       &.active{

  528.         color: #3976ff;

  529.       }

  530.       &:hover{

  531.         color: #3976ff;

  532.         cursor: pointer;

  533.       }

  534.       i{

  535.         display: block;

  536.         width: 5px;

  537.         height: 5px;

  538.         background-color: #fc5659;

  539.         position: absolute;

  540.         top: -5px;

  541.         right: -5px;

  542.         border-radius: 100%;

  543.       }

  544.     }

  545. 

  546.   }

  547. 

  548. </style>