finance.vue 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868
  1. <template>
  2. <section>
  3. <!--工具条-->
  4. <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5. <el-form :inline="true">
  6. <el-form-item label="财务核算成本 | 月份选择" style="margin-top:5px;">
  7. <el-date-picker size="small" v-model="date" :editable="false" format="yyyy-MM" value-format="yyyy-MM" @change="changeMonth" :clearable="false" type="month" placeholder="选择月份"></el-date-picker>
  8. </el-form-item>
  9. <el-radio-group v-model="radio" @change="switchList" style="margin-left:160px;margin-top:5px;">
  10. <el-radio-button label="全部人员" >全部人员({{allFinanceList.length}})</el-radio-button>
  11. <el-radio-button label="无项目工时人员">无项目工时人员({{noReportUserList.length}})</el-radio-button>
  12. </el-radio-group>
  13. <el-form-item v-if="user.role == 1 || user.role == 2 || user.role == 4" style="margin-left:5px;margin-top:5px;">
  14. <el-link type="primary" :underline="false" @click="showSettingDialog()" >分摊比例设置</el-link>
  15. </el-form-item>
  16. <el-form-item style="float:right;" v-if="user.role == 1 || user.role == 2 || user.role == 4">
  17. <el-link type="primary" :underline="false" @click="getTemplate()" >财务模板下载</el-link>
  18. </el-form-item>
  19. <!-- <el-form-item style="float:right;">
  20. <el-upload ref="upload" action="#" :limit="1" :http-request="importFinance" :show-file-list="false">
  21. <el-link type="primary" :underline="false" >财务数据上传</el-link>
  22. </el-upload>
  23. </el-form-item> -->
  24. <el-form-item style="float:right;" v-if="user.role == 1 || user.role == 2 || user.role == 4">
  25. <el-link type="primary" :underline="false" @click="importDialog = true;isUploading=false;">财务数据上传</el-link>
  26. </el-form-item>
  27. <el-form-item style="float:right;" v-if="user.role == 1 || user.role == 2 || user.role == 4">
  28. <el-link type="primary" :underline="false" @click="showItemDialog">自定义薪资项</el-link>
  29. </el-form-item>
  30. </el-form>
  31. </el-col>
  32. <!--列表-->
  33. <el-table :data="list" highlight-current-row v-loading="listLoading"
  34. show-summary=true
  35. ref="table"
  36. :height="300" style="width: 100%;">
  37. <el-table-column prop="name" label="姓名" sortable width="150"></el-table-column>
  38. <el-table-column prop="monthCost" label="工资" width="150"></el-table-column>
  39. <el-table-column prop="bonus" label="奖金" ></el-table-column>
  40. <el-table-column prop="allowance" label="津贴" ></el-table-column>
  41. <el-table-column prop="insuranceOld" label="养老保险" ></el-table-column>
  42. <el-table-column prop="insuranceMedical" label="医疗保险" ></el-table-column>
  43. <el-table-column prop="insuranceLosejob" label="失业保险" ></el-table-column>
  44. <el-table-column prop="insuranceInjury" label="工伤保险" ></el-table-column>
  45. <el-table-column prop="houseFund" label="住房公积金" ></el-table-column>
  46. <!-- <el-table-column prop="others" label="其他" ></el-table-column> -->
  47. <el-table-column :label="item.fieldName" v-for="(item, index) in customCols" :key="item.id" :prop="index==0?'customField1':(index==1?'customField2':(index==2?'customField3':''))">
  48. <template slot-scope="scope">
  49. {{index==0?scope.row.customField1:(index==1?scope.row.customField2:(index==2?scope.row.customField3:''))}}
  50. </template>
  51. </el-table-column>
  52. <el-table-column prop="totalCost" label="总成本" ></el-table-column>
  53. </el-table>
  54. <el-form :inline="true" >
  55. <el-form-item >
  56. <!-- <el-checkbox style="margin-left:10px;" v-model="assignNoProUser" @click="assignToProject">均摊无项目人员成本</el-checkbox> -->
  57. <!-- <el-button type="primary" :underline="false" size="small" @click="assignNoProUser=false;assignToProject();" style="margin-left:10px;">分摊已填工时人员成本</el-button>
  58. <el-button type="primary" :underline="false" size="small" @click="assignNoProUser=true;assignToProject();" style="margin-left:10px;">分摊全部人员成本</el-button> -->
  59. <el-radio-group v-model="costListRadio" @change="switchCostList" style="margin-left:5px;margin-top:5px;">
  60. <el-radio-button label="1" >分摊已填工时人员成本</el-radio-button>
  61. <el-radio-button label="2">分摊全部人员成本</el-radio-button>
  62. </el-radio-group>
  63. </el-form-item>
  64. <el-form-item style="float:right;">
  65. <el-link type="primary" :underline="false" @click="exportData">导出成本数据</el-link>
  66. </el-form-item>
  67. <!-- <el-form-item style="float:right;margin-right:30px;" v-if="hasNoProjectUsers">
  68. <el-link type="primary" :underline="false" @click="showNoProjectUsers">查看无项目数据</el-link>
  69. </el-form-item> -->
  70. </el-form>
  71. <div id="container" style="height:300px"></div>
  72. <!--新增界面-->
  73. <el-dialog :title="title" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass="customWidth" width="600px">
  74. <el-form ref="form1" :model="addForm" :rules="rules" label-width="100px">
  75. <el-form-item label="项目编号" >
  76. <el-input v-model="addForm.code" placeholder="请输入项目编号" clearable></el-input>
  77. </el-form-item>
  78. <el-form-item label="项目名称" prop="name">
  79. <el-input v-model="addForm.name" placeholder="请输入项目名称" clearable></el-input>
  80. </el-form-item>
  81. <el-form-item label="全部参与者">
  82. <el-select v-model="addForm.userId" multiple filterable placeholder="请选择参与者" style="width:100%;" @change="changeParticipator">
  83. <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
  84. </el-select>
  85. </el-form-item>
  86. <el-form-item label="主要负责人" >
  87. <el-select v-model="addForm.inchargerId" :disabled="addForm.userId.length==0" filterable placeholder="请选择负责人" style="width:100%;" @change="changeIncharger">
  88. <el-option v-for="item in participator" :key="item.id" :label="item.name" :value="item.id"></el-option>
  89. </el-select>
  90. </el-form-item>
  91. </el-form>
  92. <div slot="footer" class="dialog-footer">
  93. <el-button @click.native="addFormVisible = false">取消</el-button>
  94. <el-button type="primary" @click="submitInsert" :loading="addLoading">提交</el-button>
  95. </div>
  96. </el-dialog>
  97. <!--用户详细信息弹出框-->
  98. <el-dialog title="查看详情" v-if="userDetailVisible" :visible.sync="userDetailVisible" :close-on-click-modal="false" customClass="customWidth" width="400px">
  99. <div class="line"><span>姓名</span><span>{{userDetail.name}}</span></div>
  100. <div class="line"><span>手机号码</span><span>{{userDetail.phone}}</span></div>
  101. <div class="line"><span>部门</span><span>{{userDetail.departmentName}}</span></div>
  102. <div class="line"><span>成本</span><span>{{userDetail.cost}}元/小时</span></div>
  103. <div slot="footer" class="dialog-footer">
  104. <el-button type="primary" @click="userDetailVisible = false" >确定</el-button>
  105. </div>
  106. </el-dialog>
  107. <!--导入时的设置界面 -->
  108. <el-dialog title="财务数据导入" v-if="importDialog" :visible.sync="importDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
  109. <el-form ref="form3" :model="importParam" >
  110. <el-form-item label="导入月份" >
  111. <div style="color:orange;">{{date}}</div>
  112. </el-form-item>
  113. <el-form-item prop="syncHistoryReport" >
  114. <el-checkbox label="重新计算该月已填日报成本" v-model="importParam.syncHistoryReport"></el-checkbox>
  115. </el-form-item>
  116. <el-form-item prop="syncUserCost" >
  117. <el-checkbox label="同步到组织架构中员工月薪成本" v-model="importParam.syncUserCost" ></el-checkbox>
  118. </el-form-item>
  119. </el-form>
  120. <div slot="footer" class="dialog-footer">
  121. <el-upload ref="upload" action="#" :limit="1" :http-request="importFinance" :show-file-list="false" >
  122. <el-button type="primary" style="width:100%;" :loading="isUploading" >选择文件并开始导入</el-button>
  123. </el-upload>
  124. </div>
  125. </el-dialog>
  126. <!--无项目人员列表-->
  127. <!-- <el-dialog title="无项目人员列表" v-if="showNPDialog" :visible.sync="showNPDialog" :close-on-click-modal="false" customClass="customWidth" width="1200px">
  128. <el-table :data="npUserList" highlight-current-row v-loading="listLoading"
  129. show-summary=true
  130. ref="table"
  131. :height="400" style="width: 100%;">
  132. <el-table-column prop="name" label="姓名" sortable width="150"></el-table-column>
  133. <el-table-column prop="monthCost" label="工资" width="150"></el-table-column>
  134. <el-table-column prop="bonus" label="奖金" ></el-table-column>
  135. <el-table-column prop="allowance" label="津贴" ></el-table-column>
  136. <el-table-column prop="insuranceOld" label="养老保险" ></el-table-column>
  137. <el-table-column prop="insuranceMedical" label="医疗保险" ></el-table-column>
  138. <el-table-column prop="insuranceLosejob" label="失业保险" ></el-table-column>
  139. <el-table-column prop="insuranceInjury" label="工伤保险" ></el-table-column>
  140. <el-table-column prop="houseFund" label="住房公积金" ></el-table-column>
  141. <el-table-column prop="others" label="其他" ></el-table-column>
  142. <el-table-column :label="item.fieldName" v-for="(item, index) in customCols" :key="item.id" :prop="index==0?'customField1':(index==1?'customField2':(index==2?'customField3':''))">
  143. <template slot-scope="scope">
  144. {{index==0?scope.row.customField1:(index==1?scope.row.customField2:(index==2?scope.row.customField3:''))}}
  145. </template>
  146. </el-table-column>
  147. <el-table-column prop="totalCost" label="总成本" ></el-table-column>
  148. </el-table>
  149. <div slot="footer" class="dialog-footer">
  150. <div style="float:left;color:#ff9900;">*以上人员当月尚无投入的项目,请提醒他们填写日报。</div>
  151. <el-button type="primary" @click="showNPDialog = false" >关闭</el-button>
  152. </div>
  153. </el-dialog> -->
  154. <el-dialog title="自定义薪资项" show-header="false" v-if="itemDialog" :visible.sync="itemDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
  155. <div style="margin-left:30px;">
  156. <span style="color:#999;">薪资表包含以下数据</span>
  157. <p>工资</p>
  158. <p>奖金</p>
  159. <p>津贴</p>
  160. <p>养老保险</p>
  161. <p>医疗保险</p>
  162. <p>失业保险</p>
  163. <p>工伤保险</p>
  164. <p>住房公积金</p>
  165. <p><el-input v-model="customFieldList.field1" placeholder="请输入自定义薪资项1名称" style="width:200px;" maxlength="8"></el-input></p>
  166. <p><el-input v-model="customFieldList.field2" placeholder="请输入自定义薪资项2名称" style="width:200px;" maxlength="8"></el-input></p>
  167. <p><el-input v-model="customFieldList.field3" placeholder="请输入自定义薪资项3名称" style="width:200px;" maxlength="8"></el-input></p>
  168. </div>
  169. <div slot="footer" class="dialog-footer">
  170. <el-button type="primary" @click="itemDialog = false" >关闭</el-button>
  171. <el-button type="primary" @click="saveItems()" >保存</el-button>
  172. </div>
  173. </el-dialog>
  174. <el-dialog :title="date+'月 无项目工时人员分摊比例设置'" show-header="false" v-if="settingDialog" :visible.sync="settingDialog"
  175. :close-on-click-modal="false" customClass="customWidth" width="1200px">
  176. <div>
  177. <div>
  178. <el-button :disabled="multipleSelection.length==0" @click="setPercent(true, null)">批量设置比例</el-button>
  179. <el-button :disabled="projectCols.length==0 || userCostSettingList.length == 0" @click="getLastMonthSetting">使用上月比例设置</el-button>
  180. <el-button @click="showSelectProjectDialog">管理待分摊项目</el-button>
  181. </div>
  182. <el-table :data="userCostSettingList" highlight-current-row v-loading="costSettingLoading"
  183. ref="settingTable" @selection-change="handleSelectionChange"
  184. :height="400" style="width: 100%;">
  185. <el-table-column type="selection" width="55"></el-table-column>
  186. <el-table-column prop="name" label="姓名" sortable width="90" fixed="left"></el-table-column>
  187. <el-table-column :label="item.projectName" v-for="(item) in projectCols" width="180" size="small"
  188. :key="item.id" align="center">
  189. <template slot-scope="scope">
  190. <span>{{scope.row[item.projectId]}}</span>%
  191. </template>
  192. </el-table-column>
  193. <el-table-column label="设置比例" width="80" fixed="right">
  194. <template slot-scope="scope">
  195. <el-button size="small" @click="setPercent(false,scope.row)">设置</el-button>
  196. </template>
  197. </el-table-column>
  198. </el-table>
  199. </div>
  200. <div slot="footer" class="dialog-footer">
  201. <el-button type="primary" @click="settingDialog = false" >关闭</el-button>
  202. <el-button type="primary" @click="saveMonthSetting()" >保存</el-button>
  203. </div>
  204. </el-dialog>
  205. <el-dialog title="待分摊项目选择" show-header="false" v-if="projectsDialog" :visible.sync="projectsDialog"
  206. :close-on-click-modal="false" customClass="customWidth" width="1000px">
  207. <el-select v-model="chosenProjects" multiple filterable clearable style="width:100%">
  208. <el-option v-for="item in allProjectList" :label="item.projectName" :key="item.id" :value="item.id"></el-option>
  209. </el-select>
  210. <div slot="footer" class="dialog-footer">
  211. <el-button type="default" @click="projectsDialog = false" >关闭</el-button>
  212. <el-button type="primary" @click="saveProjectSetting()" >确定</el-button>
  213. </div>
  214. </el-dialog>
  215. <el-dialog title="设置员工成本各项目占比" show-header="false" v-if="setPercentDialog" :visible.sync="setPercentDialog"
  216. :close-on-click-modal="false" customClass="customWidth" width="600px" >
  217. <div style="margin:0px 10px 10px 10px;">
  218. <span>选择员工</span>
  219. <el-select v-model="chosenNoReportUserIds" multiple filterable clearable style="width:330px;" collapse-tags>
  220. <el-option v-for="item in noReportUserList" :label="item.name" :key="item.id" :value="item.userId"></el-option>
  221. </el-select>
  222. <el-button @click="averageCost" >自动分摊</el-button>
  223. </div>
  224. <el-divider ></el-divider>
  225. <!--项目列表 -->
  226. <el-form v-model="curPercentVal" label-width="365px" style="margin-top:10px;">
  227. <div class="nameList">
  228. <el-form-item v-for="item in projectCols" :label="item.projectName" :key="item.projectId" >
  229. 占比: <el-input v-model="curPercentVal[item.projectId]" style="width:100px;" @input="updatePercentValue"></el-input>&nbsp;%
  230. </el-form-item>
  231. </div>
  232. <el-form-item >
  233. 总比例: {{totalPercent}}&nbsp;%
  234. </el-form-item>
  235. </el-form>
  236. <div slot="footer" class="dialog-footer">
  237. <el-button type="default" @click="setPercentDialog = false" >关闭</el-button>
  238. <el-button type="primary" @click="setPercentSetting()" >确定</el-button>
  239. </div>
  240. </el-dialog>
  241. </section>
  242. </template>
  243. <style scoped>
  244. .line {
  245. padding:10px;
  246. }
  247. .line span{
  248. font-size:18px;
  249. }
  250. .line span:nth-child(even){
  251. float:right;
  252. }
  253. </style>
  254. <script>
  255. import util from "../../common/js/util";
  256. export default {
  257. data() {
  258. return {
  259. costListRadio: 0,
  260. costSettingLoading: false,
  261. chosenNoReportUserIds:[],
  262. curPercentVal:{},
  263. setPercentDialog: false,
  264. chosenProjects:[],
  265. projectsDialog: false,
  266. projectCols:[],
  267. allProjectList:[],
  268. multipleSelection:[],
  269. userCostSettingList: [],
  270. settingDialog: false,
  271. radio:"全部人员",
  272. noReportUserList:[],
  273. allFinanceList:[],
  274. assignNoProUser: false,
  275. customFieldList:{field1:null, field2: null, field3: null},
  276. itemDialog: false,
  277. customCols:[],
  278. // showNPDialog: false,
  279. npUserList:[],
  280. hasNoProjectUsers: false,
  281. isUploading:false,
  282. importDialog: false,
  283. importParam:{syncUserCost:true, syncHistoryReport:true},
  284. user: JSON.parse(sessionStorage.getItem("user")),
  285. userDetailVisible: false,
  286. userDetail:{},
  287. date: null,
  288. tableHeight: 0,
  289. listLoading: false,
  290. list: [],
  291. addLoading: false,
  292. myChart: null,
  293. params: null,
  294. totalPercent:0,
  295. };
  296. },
  297. methods: {
  298. switchCostList() {
  299. //已填日报的人员成本
  300. if (this.costListRadio == 1) {
  301. this.assignNoProUser=false;
  302. this.assignToProject();
  303. } else if (this.costListRadio == 2) {
  304. //全部人员成本
  305. this.assignNoProUser=true;
  306. this.assignToProject();
  307. }
  308. },
  309. getLastMonthSetting() {
  310. this.costSettingLoading = true;
  311. var dataArr = this.date.split('-');
  312. var year = dataArr[0];
  313. var month = dataArr[1];
  314. if (parseInt(month) == 1) {
  315. year = parseInt(year) -1;
  316. month = 12;
  317. } else {
  318. month = parseInt(month) -1;
  319. if (month < 10) {
  320. month = '0'+month;
  321. }
  322. }
  323. var lastMonth = year + '-' + month;
  324. this.http.post('/project-percentage/getMonthSetting', {ymonth: lastMonth},
  325. res => {
  326. this.costSettingLoading = false;
  327. if (res.code == "ok") {
  328. this.projectCols = res.data.financeProjects;
  329. this.allProjectList = res.data.allProjectList;
  330. this.userCostSettingList = res.data.userCostSetting;
  331. //上次如果没有配置过,需要初始化
  332. for (var i=0;i<this.noReportUserList.length; i++) {
  333. var rUser = this.noReportUserList[i];
  334. //检查当前列表中的无项目人员是否在之前的里面存在,如果不在需要加上去
  335. if (this.userCostSettingList.filter(c=>c.id == rUser.userId).length == 0) {
  336. var item = {name: rUser.name, id: rUser.userId};
  337. this.projectCols.forEach(p=>{
  338. item[p.projectId] = 0;
  339. });
  340. this.userCostSettingList.push(item);
  341. }
  342. }
  343. this.$nextTick(()=>{
  344. this.$refs.settingTable.doLayout();
  345. })
  346. } });
  347. },
  348. //获取当月的无项目工时人员的分配比例设置
  349. getMonthSetting() {
  350. this.costSettingLoading = true;
  351. this.http.post('/project-percentage/getMonthSetting', {ymonth: this.date},
  352. res => {
  353. this.costSettingLoading = false;
  354. if (res.code == "ok") {
  355. this.projectCols = res.data.financeProjects;
  356. this.allProjectList = res.data.allProjectList;
  357. this.userCostSettingList = res.data.userCostSetting;
  358. //上次如果没有配置过,需要初始化
  359. for (var i=0;i<this.noReportUserList.length; i++) {
  360. var rUser = this.noReportUserList[i];
  361. console.log('userId====='+rUser.userId);
  362. //检查当前列表中的无项目人员是否在之前的里面存在,如果不在需要加上去
  363. if (this.userCostSettingList.filter(c=>c.id == rUser.userId).length == 0) {
  364. var item = {name: rUser.name, id: rUser.userId};
  365. this.projectCols.forEach(p=>{
  366. item[p.projectId] = 0;
  367. });
  368. this.userCostSettingList.push(item);
  369. }
  370. }
  371. this.$nextTick(()=>{
  372. this.$refs.settingTable.doLayout();
  373. })
  374. } });
  375. },
  376. //提交无工时人员的分配设置
  377. saveMonthSetting() {
  378. //检查数据是否都分配到100%了,防止由于修改了项目列而导致之前的数据不正确的情况
  379. var errorList = this.userCostSettingList.filter(u=>{
  380. let totalPercent = 0.0;
  381. this.projectCols.forEach(p=>{
  382. totalPercent += parseFloat(u[p.projectId]);
  383. });
  384. totalPercent = totalPercent.toFixed(1);
  385. if (totalPercent != 100) {
  386. return true;
  387. } else {
  388. return false;
  389. }
  390. });
  391. if (errorList.length > 0) {
  392. var nameList = errorList.map(e=>e.name);
  393. this.$message({type:'error', message:'存在人员分配比例非100%: '+nameList});
  394. return;
  395. }
  396. this.http.post('/project-percentage/saveMonthSetting', {projectCols: JSON.stringify(this.projectCols),
  397. ymonth: this.date, userSettings: JSON.stringify(this.userCostSettingList)},
  398. res => {
  399. if (res.code == "ok") {
  400. this.$message({type:'success', message:'保存成功'});
  401. this.settingDialog = false;
  402. } else {
  403. this.$message({type:'error', message:'发生错误:'+res.msg});
  404. }});
  405. },
  406. updatePercentValue() {
  407. var total = 0.0;
  408. this.projectCols.forEach(p=>{
  409. total += parseFloat(this.curPercentVal[p.projectId]);
  410. })
  411. this.totalPercent = total.toFixed(1);
  412. this.$forceUpdate();
  413. },
  414. averageCost() {
  415. var avg = (100/this.projectCols.length).toFixed(1);
  416. //最后一个用100减去前面的总和,保证最终合计为100
  417. for (var i=0;i<this.projectCols.length; i++) {
  418. if (i < this.projectCols.length -1) {
  419. this.curPercentVal[this.projectCols[i].projectId] = avg;
  420. } else {
  421. this.curPercentVal[this.projectCols[i].projectId] = (100-avg*(this.projectCols.length-1)).toFixed(1);
  422. }
  423. }
  424. this.updatePercentValue();
  425. this.$forceUpdate();
  426. },
  427. setPercent(isBatch, row) {
  428. this.setPercentDialog = true;
  429. this.chosenNoReportUserIds = [];
  430. if (!isBatch) {
  431. this.chosenNoReportUserIds.push(row.id);
  432. //获取当前比例
  433. this.projectCols.forEach(p=>{
  434. this.curPercentVal[p.projectId] = row[p.projectId];
  435. });
  436. } else {
  437. //批量处理
  438. this.multipleSelection.forEach(m=>{
  439. this.chosenNoReportUserIds.push(m.id);
  440. })
  441. //批量时获取第一条的比例进行加载
  442. this.projectCols.forEach(p=>{
  443. this.curPercentVal[p.projectId] = this.multipleSelection[0][p.projectId];
  444. });
  445. }
  446. this.updatePercentValue();
  447. },
  448. //确认设置的项目列
  449. saveProjectSetting() {
  450. this.projectsDialog = false;
  451. this.projectCols = [];
  452. this.chosenProjects.forEach(c=>{
  453. var item = this.allProjectList.filter(a=>a.id == c)[0];
  454. this.projectCols.push({projectId: item.id, projectName: item.projectName, projectCode: item.projectCode});
  455. });
  456. this.$nextTick(()=>{
  457. this.$refs.settingTable.doLayout();
  458. })
  459. },
  460. handleProjectSelectionChange(val) {
  461. this.projectSelection = val;
  462. },
  463. showSelectProjectDialog() {
  464. //设置选中状态
  465. this.chosenProjects = [];
  466. this.projectCols.forEach(item=>{
  467. this.chosenProjects.push(item.projectId);
  468. })
  469. this.projectsDialog = true;
  470. },
  471. setPercentSetting() {
  472. //检测是否填写的情况下,是否达到100%
  473. if (this.totalPercent != 100) {
  474. this.$message({
  475. message: '分配比例之和必须是100%',
  476. type: "error"
  477. });
  478. return;
  479. }
  480. this.setPercentDialog = false;
  481. this.chosenNoReportUserIds.forEach(u=>{
  482. var targetU = this.userCostSettingList.filter(a=>a.id == u)[0];
  483. //遍历项目
  484. this.projectCols.forEach(p=>{
  485. targetU[p.projectId] = this.curPercentVal[p.projectId];
  486. })
  487. });
  488. this.userCostSettingList.splice(1,0);
  489. },
  490. showSettingDialog() {
  491. this.settingDialog = true;
  492. this.getMonthSetting();
  493. },
  494. handleSelectionChange(val) {
  495. this.multipleSelection = val;
  496. },
  497. switchList() {
  498. if (this.radio == '全部人员') {
  499. this.list = this.allFinanceList;
  500. } else {
  501. this.list = this.noReportUserList;
  502. }
  503. },
  504. downloadByA(row) {
  505. const a = document.createElement('a'); // 创建a标签
  506. a.setAttribute('download', row.name);// download属性
  507. a.setAttribute('href', row.url);// href链接
  508. a.click();// 自执行点击事件
  509. a.remove();
  510. },
  511. getTemplate() {
  512. this.http.post('/finance/getTemplate', {companyId: this.user.companyId},
  513. res => {
  514. if (res.code == "ok") {
  515. if (res.data.indexOf('xlsx') > 0) {
  516. this.downloadByA({name:'财务成本报表.xlsx', url:res.data});
  517. } else {
  518. this.downloadByA({name:'财务成本报表.xls', url:res.data});
  519. }
  520. }});
  521. },
  522. saveItems() {
  523. this.http.post('/finance-tblcuscol/save', this.customFieldList,
  524. res => {
  525. if (res.code == "ok") {
  526. this.itemDialog = false;
  527. this.getCustomColumn();
  528. }});
  529. },
  530. showItemDialog() {
  531. this.itemDialog = true;
  532. this.customFieldList = {field1:null,field2:null, field3:null};
  533. for (var i=0;i<this.customCols.length; i++) {
  534. if (i == 0) {
  535. this.customFieldList.field1 = this.customCols[i].fieldName;
  536. } else if (i == 1) {
  537. this.customFieldList.field2 = this.customCols[i].fieldName;
  538. } else if (i == 2) {
  539. this.customFieldList.field3 = this.customCols[i].fieldName;
  540. }
  541. }
  542. },
  543. //获取自定义的字段
  544. getCustomColumn() {
  545. this.http.post('/finance-tblcuscol/get', {companyId: this.user.companyId},
  546. res => {
  547. if (res.code == "ok") {
  548. this.customCols = res.data;
  549. }});
  550. },
  551. // getProjects() {
  552. // this.http.post('/finance/getProjects', {companyId: this.user.companyId, yearMonth: this.date},
  553. // res => {
  554. // if (res.code == "ok") {
  555. // this.projectCols = res.data.financeProjects;
  556. // this.allProjectList = res.data.allProjectList;
  557. // }});
  558. // },
  559. // showNoProjectUsers() {
  560. // this.showNPDialog = true;
  561. // this.http.post('/finance/getNoProjectUsers', {yearMonth: this.date},
  562. // res => {
  563. // if (res.code == "ok") {
  564. // this.npUserList = res.data;
  565. // }});
  566. // },
  567. assignToProject(){
  568. var _this = this;
  569. this.http.post('/finance/getTimeCost', {yearMonth: this.date, assignNoProUser: this.assignNoProUser},
  570. res => {
  571. if (res.code == "ok") {
  572. var xList = [], yList = [], list = res.data.costList,
  573. totalMoneyCost = res.data.totalMoneyCost;
  574. var nopCost = 0;
  575. if (res.data.noProjectItem.project != null) {
  576. this.hasNoProjectUsers = true;
  577. nopCost = res.data.noProjectItem.cost;
  578. } else {
  579. this.hasNoProjectUsers = false;
  580. }
  581. for(var i in list) {
  582. xList.push(list[i].project);
  583. yList.push({
  584. "value": list[i].cost,
  585. "id": list[i].id,
  586. "time": list[i].workingTime
  587. });
  588. }
  589. var myChart = echarts.init(document.getElementById("container"));
  590. _this.myChart = myChart;
  591. var option = {
  592. title: {
  593. text: this.assignNoProUser?'成本总计 ' + totalMoneyCost + '元'
  594. +(this.hasNoProjectUsers?",含无项目人员成本 " + nopCost+"元 ":"")
  595. :'成本总计 ' + totalMoneyCost + '元',
  596. left:'left',
  597. },
  598. // 工具箱
  599. toolbox: {
  600. show: true,
  601. feature:{
  602. saveAsImage:{
  603. show:true
  604. },
  605. restore:{
  606. show:true
  607. },
  608. magicType:{
  609. type:['line','bar']
  610. },
  611. }
  612. },
  613. tooltip:{
  614. trigger:'axis',
  615. formatter: function (params,ticket,callback) {
  616. var res = params[0].name + "<br/>工作成本"+" : " + params[0].data.value
  617. + "元 <br/>工作时长"+" : " + params[0].data.time + "小时";
  618. _this.params = params;
  619. return res;
  620. }
  621. },
  622. xAxis: {
  623. data: xList,
  624. axisLabel: {
  625. interval:0,rotate:20
  626. }
  627. },
  628. yAxis: [{
  629. type : 'value',
  630. axisLabel: {
  631. formatter:'{value} (元)'
  632. }
  633. }],
  634. series: [{
  635. name: '工作时长(h)',
  636. type: 'bar',
  637. barMaxWidth: 30,
  638. data: yList,
  639. }]
  640. };
  641. option && myChart.setOption(option,{notMerge: true});
  642. // myChart.getZr().on('click', params => {
  643. // const pointInPixel = [params.offsetX, params.offsetY];
  644. // if (myChart.containPixel('grid', pointInPixel)) {
  645. // console.log(_this.params)
  646. // if(_this.radio=='项目') {
  647. // _this.$router.push("/cost/" + _this.params[0].data.id + "/" + _this.params[0].name);
  648. // }
  649. // }
  650. // });
  651. } else {
  652. this.$message({
  653. message: res.msg,
  654. type: "error"
  655. });
  656. }
  657. },
  658. error => {
  659. this.$message({
  660. message: error,
  661. type: "error"
  662. });
  663. });
  664. },
  665. //导出财务数据
  666. exportData() {
  667. this.listLoading = true;
  668. this.http.post('/finance/exportData', {
  669. date: this.date, assignNoProUser: this.assignNoProUser
  670. },
  671. res => {
  672. this.listLoading = false;
  673. if (res.code == "ok") {
  674. var aTag = document.createElement('a');
  675. aTag.download = "财务成本统计.xls";
  676. aTag.href = res.data;
  677. aTag.click();
  678. } else {
  679. this.$message({
  680. message: res.msg,
  681. type: "error"
  682. });
  683. }
  684. },
  685. error => {
  686. this.listLoading = false;
  687. this.$message({
  688. message: error,
  689. type: "error"
  690. });
  691. });
  692. },
  693. getSummaries(param) {
  694. const { columns, data } = param;
  695. const sums = [];
  696. columns.forEach((column, index) => {
  697. if (index === 0) {
  698. sums[index] = '总价';
  699. return;
  700. }
  701. const values = data.map(item => Number(item[column.property]));
  702. if (!values.every(value => isNaN(value))) {
  703. sums[index] = values.reduce((prev, curr) => {
  704. const value = Number(curr);
  705. if (!isNaN(value)) {
  706. return prev + curr;
  707. } else {
  708. return prev;
  709. }
  710. }, 0);
  711. sums[index] += ' 元';
  712. } else {
  713. sums[index] = 'N/A';
  714. }
  715. });
  716. return sums;
  717. },
  718. changeMonth() {
  719. //改变月份
  720. this.getList();
  721. this.assignToProject();
  722. },
  723. // 批量导入人员
  724. importFinance(item) {
  725. //首先判断文件类型
  726. let str = item.file.name.split(".");
  727. let format = str[str.length - 1];
  728. if (format != "xls" && format != "xlsx") {
  729. this.$message({
  730. message: "请选择.xls或.xlsx文件",
  731. type: "error"
  732. });
  733. } else {
  734. this.listLoading = true;
  735. let formData = new FormData();
  736. formData.append("file", item.file);
  737. formData.append("companyId", this.user.companyId);
  738. formData.append("yearMonth", this.date);
  739. formData.append("syncUserCost", this.importParam.syncUserCost);
  740. formData.append("syncHistoryReport", this.importParam.syncHistoryReport);
  741. this.isUploading = true;
  742. this.http.uploadFile('/finance/importData', formData,
  743. res => {
  744. this.$refs.upload.clearFiles();
  745. this.listLoading = false;
  746. this.isUploading = false;
  747. if (res.code == "ok") {
  748. this.$message({
  749. message: "导入成功",
  750. type: "success"
  751. });
  752. this.importDialog = false;
  753. //重新读取列表
  754. this.getList();
  755. } else {
  756. this.$message({
  757. message: res.msg,
  758. type: "error"
  759. });
  760. }
  761. },
  762. error => {
  763. this.$refs.upload.clearFiles();
  764. this.listLoading = false;
  765. this.$message({
  766. message: error,
  767. type: "error"
  768. });
  769. });
  770. }
  771. },
  772. //获取项目列表
  773. getList() {
  774. this.listLoading = true;
  775. this.http.post('/finance/getByMonth', {
  776. companyId: this.user.companyId,
  777. yearMonth: this.date
  778. },
  779. res => {
  780. this.listLoading = false;
  781. if (res.code == "ok") {
  782. var list = res.data;
  783. this.allFinanceList = list;
  784. this.list = this.allFinanceList;
  785. this.noReportUserList = list.filter(r=>r.hasReport == 0);
  786. } else {
  787. this.$message({
  788. message: res.msg,
  789. type: "error"
  790. });
  791. }
  792. },
  793. error => {
  794. this.listLoading = false;
  795. this.$message({
  796. message: error,
  797. type: "error"
  798. });
  799. });
  800. },
  801. },
  802. created() {
  803. var d = new Date();
  804. this.date = d.getFullYear() +'-'+ ((d.getMonth()+1) < 10? '0'+(d.getMonth()+1):d.getMonth()+1);
  805. },
  806. mounted() {
  807. let height = window.innerHeight;
  808. this.tableHeight = height - 245;
  809. const that = this;
  810. window.onresize = function temp() {
  811. that.tableHeight = window.innerHeight - 245;
  812. };
  813. this.getList();
  814. this.getCustomColumn();
  815. // this.getProjects();
  816. },
  817. updated() {
  818. this.$nextTick(() => {
  819. this.$refs['table'].doLayout();
  820. })
  821. }
  822. };
  823. </script>
  824. <style lang="scss" scoped>
  825. .nameList {
  826. height: 400px;
  827. overflow: auto;
  828. }
  829. </style>