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.
17 Commitit
1 Haara
1.7 MiB
 
 
 
 
Puu: aeb7ee8e15
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from 'aeb7ee8e15'
${ noResults }
nsgk_agentcenter_front/src/views/allTasks/allTasks.vue

496 rivejä
13 KiB
Raaka Blame Historia 

  1. <template>

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

  3. 

  4.     <div class="header_main">

  5. 

  6.       <TopDeptChooser :county-code.sync="parms.countyCode" :town-code.sync="parms.townCode" :root-id="rootId" @countyChanged="chooseCity" @dataChanged="chooseDept"/>

  7. 

  8.       <p class="todo_num">镇处理进度：<span>{{ countySummary.numTownProcessedTask }}/{{ countySummary.numTown }}</span></p>

  9.       <p class="todo_num3">镇审核进度：<span>{{ countySummary.numTownApprovalTask }}/{{ countySummary.numTown }}</span></p>

  10.       <p class="todo_num1">合作社处理进度：<span>{{ countySummary.numBookProcessedTask }}/{{ countySummary.numBook }}</span></p>

  11.       <p class="todo_num3">合作社审核进度：<span>{{ countySummary.numBookApprovalTask }}/{{ countySummary.numBook }}</span></p>

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

  13. 

  14.     </div>

  15. 

  16.     <div class="main">

  17. 

  18.       <div class="left_main">

  19.         <el-collapse accordion>

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

  21.             <template slot="title">

  22.               <div class="left_main_tt">

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

  24.                 <div class="tt_label">

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

  26.                   <p>村庄处理进度：{{item.numProcessFinish}}/{{item.num}}</p>

  27.                   <p>村庄审核进度：{{item.numApprovalFinish}}/{{item.num}}</p>

  28.                 </div>

  29.               </div>

  30.             </template>

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

  32. 

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

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

  35.                   <div class="openTable">

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

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

  38.                         <div class="tab_main">

  39.                           <span v-if="task.agentStatus === '1'">未处理</span><span v-if="task.agentStatus === '3'">未审核</span>

  40.                           <span v-if="task.agentStatus !== '1'" class="tab_green">已处理</span><span class="tab_green" v-if="task.agentStatus === '4'">已审核</span>

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

  42.                           {{task.bookName}}

  43.                         </div>

  44.                       </el-col>

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

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

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

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

  49.                     </el-row>

  50.                   </div>

  51.                 </template>

  52.               </el-table-column>

  53. 

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

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

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

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

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

  59.                 </template>

  60.               </el-table-column>

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

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

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

  64.                 </template>

  65.               </el-table-column>

  66.               <el-table-column label="审核进度" show-overflow-tooltip >

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

  68.                   {{scope.row.numApprovalFinish}}/{{scope.row.num}}

  69.                 </template>

  70.               </el-table-column>

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

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

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

  74.               <el-table-column prop="handleDate" label="记账完成日期" show-overflow-tooltip />

  75.               <el-table-column label="是否审批完成" show-overflow-tooltip >

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

  77.                   <p class="backButton" v-if="!scope.row.approvalFinish">未完成</p>

  78.                   <p class="backButton2" v-if="scope.row.approvalFinish">已完成</p>

  79.                 </template>

  80.               </el-table-column>

  81. 

  82.             </el-table>

  83.           </el-collapse-item>

  84.         </el-collapse>

  85. 

  86.       </div>

  87. 

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

  89. 

  90.     </div>

  91. 

  92. 

  93.   </div>

  94. </template>

  95. 

  96. <script>

  97. import {cityTree, deptTree} from "@/api/misc/misc_dept";

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

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

  100. import {managerAllTaskList, managerCountyTaskSummary,} from "@/api/agentcenter/task";

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

  102. import TopDeptChooser from "@/components/framework/TopDeptChooser.vue";

  103. 

  104. export default {

  105.   name: "processing",

  106.   components: {TopDeptChooser, RightYearMonthSelector},

  107.   data() {

  108.     return {

  109.       list: [],

  110.       total: 0,

  111.       parms: {

  112.         countyCode: null,

  113.         townCode: null,

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

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

  116.       },

  117.       countySummary: {

  118.         numTown: 0,

  119.         numBook: 0,

  120.         abnormalCount: 0,

  121.         numTownProcessedTask: 0,

  122.         numTownApprovalTask: 0,

  123.         numBookProcessedTask: 0,

  124.         numBookApprovalTask: 0,

  125.       },

  126.       rootId: ENV.UserDeptId(),

  127.     }

  128.   },

  129.   created() {

  130.   },

  131.   methods:{

  132.     getTaskList() {

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

  134.         return;

  135.       managerAllTaskList(this.parms).then((resp) => {

  136.         this.list = resp.rows;

  137.         this.total = resp.total;

  138.       })

  139.     },

  140.     chooseDept(countyCode, townCode, what) {

  141.       this.getTaskList();

  142.     },

  143.     chooseCity(countyCode, townCode) {

  144.       this.getSummary();

  145.     },

  146.     chooseMonth(year, month) {

  147.       this.getSummary();

  148.       this.getTaskList();

  149.     },

  150.     gotoRemoteSite(task) {

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

  152.     },

  153.     getSummary() {

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

  155.         return;

  156.       managerCountyTaskSummary(this.parms).then((resp) => {

  157.         this.countySummary = resp.data;

  158.       })

  159.     }

  160.   },

  161.   mounted(){

  162. 

  163.   },

  164.   computed: {

  165.   },

  166. }

  167. </script>

  168. 

  169. <style lang="scss" scoped>

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

  171.   .app-container{

  172.     background-color: #f5f6f8;

  173.     width: 100%;

  174.     height: 91vh;

  175.   }

  176. 

  177.   .selected{

  178.     display: flex;

  179.     height: 4vh;

  180.     p{

  181.       width: 8vw;

  182.       line-height: 4vh;

  183.       text-align: center;

  184.     }

  185.   }

  186.   .pickerTime{

  187.     opacity: 0;

  188.     position: absolute;

  189.     left: 0px;

  190.     top: 30px;

  191.     width: 5px;

  192.     height: 5px;

  193.     z-index: -1;

  194.   }

  195.   .el-dropdown-link {

  196.     cursor: pointer;

  197.   }

  198. 

  199.   .title{

  200.     display: flex;

  201.     align-items: center;

  202.     i{

  203.       display: inline-block;

  204.       width: 5px;

  205.       height: 20px;

  206.       background: #4d7cfe;

  207.       border-radius: 5px;

  208.       margin-right: 10px;

  209.     }

  210.     p{

  211.       font-size: 16px;

  212.     }

  213.   }

  214. 

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

  216.     border: none;

  217.   }

  218. 

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

  220.     border: none;

  221.   }

  222. 

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

  224.     background-color: #e2ebff;

  225.   }

  226. 

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

  228.     background-color: #e2ebff;

  229.   }

  230. 

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

  232.     background-color: transparent;

  233.   }

  234. 

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

  236.     text-align: center;

  237.   }

  238. 

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

  240.     border: none!important;

  241.   }

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

  243.     display: none;

  244.   }

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

  246.     background-color: transparent;

  247.   }

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

  249.     background-color: transparent;

  250.   }

  251. 

  252.   .openTable{

  253.     padding: 1vh 2vw;

  254.     background-color: #ffffff;

  255.     border-radius: 15px;

  256.     overflow: hidden;

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

  258.     margin: 0 auto;

  259.     .tab_main{

  260.       display: flex;

  261.       span{

  262.         color: #ffffff;

  263.         background-color: #acabab;

  264.         padding: 2px 0px;

  265.         width: 4vw;

  266.         display: inline-block;

  267.         border-radius: 7px;

  268.         margin-right: 1vw;

  269.         text-align: center;

  270.       }

  271.       .tab_green{

  272.         background-color: #209955;

  273.       }

  274.       .tab_red{

  275.         background-color: #ef0027;

  276.       }

  277.     }

  278. 

  279.     .num{

  280.       color: #3976ff;

  281.       display: inline-block;

  282.       background-color: #e2ebff;

  283.       width: 1.8vw;

  284.       border-radius: 5px;

  285.       margin-left: 5px;

  286.     }

  287.     .el-col{

  288.       padding: 10px 0;

  289.     }

  290.   }

  291. 

  292.   .header_main{

  293.     display: flex;

  294.     align-items: center;

  295.     position: relative;

  296.     .selected{

  297.       width: 16vw;

  298.       background-color: #ffffff;

  299.       position: absolute;

  300.       top: 4vh;

  301.       left: 10vw;

  302.       z-index: 9;

  303.       border-radius: 8px;

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

  305.       padding: 1vh 0;

  306.       div{

  307.         display: flex;

  308.         height: 4vh;

  309.         p{

  310.           width: 8vw;

  311.           line-height: 4vh;

  312.           text-align: center;

  313.         }

  314.       }

  315.     }

  316.     .select_address{

  317.       display: flex;

  318.       align-items: center;

  319.       justify-content: center;

  320.       margin-right: 2vw;

  321.       background-color: #ffffff;

  322.       padding: 0px 0px;

  323.       border-radius: 8px;

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

  325.       width: 8vw;

  326.       height: 4vh;

  327.       overflow: hidden;

  328.       &:nth-child(2){

  329.         margin-right: 0vw;

  330.       }

  331.       &:nth-child(3){

  332.         margin-right: 0vw;

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

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

  335.       }

  336.       .sanjiao-right {

  337.         display: inline-block;

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

  339.         border-left-color: initial;

  340.         border-top: 5px solid transparent;

  341.         border-bottom: 5px solid transparent;

  342.         margin-right: 5px;

  343.       }

  344.       .select_time{

  345.         text-align: center;

  346.         width: 100%;

  347.         height: 4vh;

  348.         line-height: 4vh;

  349.         background-color: #3976ff;

  350.         color: #ffffff;

  351.       }

  352.     }

  353.     .todo_num{

  354.       margin-left: auto;

  355.       span{

  356.         font-size: 24px;

  357.         color: #3976ff;

  358.       }

  359.     }

  360.     .todo_num1{

  361.       margin-left: 2vw;

  362.       span{

  363.         font-size: 24px;

  364.         color: #3976ff;

  365.       }

  366.     }

  367.     .todo_num2{

  368.       margin-left: 2vw;

  369.       span{

  370.         font-size: 24px;

  371.         color: #ef0027;

  372.       }

  373.     }

  374.     .todo_num3{

  375.       margin-left: 2vw;

  376.       span{

  377.         font-size: 24px;

  378.         color: #209955;

  379.       }

  380.     }

  381.   }

  382. 

  383.   .main{

  384.     display: flex;

  385.     .left_main{

  386.       width: 92%;

  387.       margin-right: 0.57%;

  388.       margin-top: 15px;

  389.       border-radius: 8px;

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

  391.       background: #fff;

  392.       padding: 15px 20px;

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

  394.       .backButton{

  395.         color: #3976ff;

  396.         display: inline-block;

  397.       }

  398.       .backButton2{

  399.         color: #209955;

  400.         display: inline-block;

  401.       }

  402.       .left_main_tt{

  403.         flex: 1;

  404.         display: flex;

  405.         align-items: center;

  406.         justify-content: space-between;

  407.         .tt_label{

  408.           display: flex;

  409.           align-items: center;

  410.           p{

  411.             margin-right: 2vw;

  412.             &:nth-child(1){

  413.               color: #ef0027;

  414.             }

  415.           }

  416.         }

  417.       }

  418.     }

  419. 

  420.     .right_main{

  421.       width: 7.43%;

  422.       margin-top: 15px;

  423.       border-radius: 8px;

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

  425.       background: #fff;

  426.       padding: 15px 20px;

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

  428.     }

  429. 

  430.   }

  431. 

  432.   .sanjiao-top {

  433.     display: inline-block;

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

  435.     border-bottom-color: initial;

  436.     border-left: 5px solid transparent;

  437.     border-right: 5px solid transparent;

  438.   }

  439. 

  440.   .sanjiao-bottom {

  441.     display: inline-block;

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

  443.     border-top-color: initial;

  444.     border-left: 5px solid transparent;

  445.     border-right: 5px solid transparent;

  446.   }

  447. 

  448.   .time_main{

  449.     display: flex;

  450.     flex-direction: column;

  451.     align-items: center;

  452.     background-color: #f5f6f8;

  453.     color: #414141;

  454.     width: 75%;

  455.     margin: 0 auto;

  456.     margin-top: 15px;

  457.     padding: 15px 0;

  458.     border-radius: 8px;

  459.     position: relative;

  460.     cursor: pointer;

  461.     p{

  462.       margin: 10px 0;

  463.     }

  464.   }

  465. 

  466.   .month_main{

  467.     display: flex;

  468.     flex-direction: column;

  469.     align-items: center;

  470.     color: #414141;

  471.     p{

  472.       margin-top: 3vh;

  473.       position: relative;

  474.       &.active{

  475.         color: #3976ff;

  476.       }

  477.       &:hover{

  478.         color: #3976ff;

  479.         cursor: pointer;

  480.       }

  481.       i{

  482.         display: block;

  483.         width: 5px;

  484.         height: 5px;

  485.         background-color: #fc5659;

  486.         position: absolute;

  487.         top: -5px;

  488.         right: -5px;

  489.         border-radius: 100%;

  490.       }

  491.     }

  492. 

  493.   }

  494. 

  495. </style>