cost.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. <template>
  2. <div class="manage">
  3. <!-- <TitleBar propTitle="成本管理" /> -->
  4. <div class="add-container">
  5. <el-button type="primary" @click="append('COST')">增加成本</el-button>
  6. </div>
  7. <el-card class="right-card">
  8. <el-table :data="manageData" :row-class-name="isDel" align="right" border empty-text="无">
  9. <el-table-column
  10. width="120px"
  11. label="发生日期"
  12. :formatter="dateFormat"
  13. prop="happenTime"
  14. align="right"
  15. ></el-table-column>
  16. <el-table-column
  17. width="110px"
  18. align="right"
  19. label="金额"
  20. :formatter="moneyFormat"
  21. prop="amount"
  22. ></el-table-column>
  23. <el-table-column width="170px" align="right" label="成本类别" prop="costType.name"></el-table-column>
  24. <el-table-column width="260px" align="right" label="发生项目/人" prop="project.name"></el-table-column>
  25. <el-table-column width="260px" align="right" label="发生部门" prop="department.name"></el-table-column>
  26. <!-- <el-table-column label="接收项目" prop="toProject.name"></el-table-column> -->
  27. <!-- <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column> -->
  28. <el-table-column label="备注" align="right" prop="remark"></el-table-column>
  29. <el-table-column label="操作" align="center" width="160">
  30. <template slot-scope="scope">
  31. <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  32. <el-button
  33. size="mini"
  34. v-if="scope.row.status==='NORMAL'"
  35. @click="handleAbandon(scope.$index, scope.row)"
  36. >作废</el-button>
  37. <!--
  38. <el-button
  39. size="mini"
  40. type="danger"
  41. @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  42. -->
  43. </template>
  44. </el-table-column>
  45. <el-table-column
  46. width="120px"
  47. align="right"
  48. label="录入日期"
  49. :formatter="recordTimeFormat"
  50. prop="gmtModife"
  51. ></el-table-column>
  52. </el-table>
  53. <el-pagination
  54. background
  55. @current-change="handlePageChange"
  56. :page-size="50"
  57. layout="prev, pager, next"
  58. :total="totalNumber"
  59. ></el-pagination>
  60. </el-card>
  61. <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
  62. <el-form :model="form" ref="form">
  63. <el-form-item
  64. label="发生时间"
  65. prop="happenTime"
  66. :label-width="formLabelWidth"
  67. :rules="[{ required: true, message: '名称不能为空'}]"
  68. >
  69. <el-date-picker v-model="form.happenTime" type="date" placeholder="接收日期"></el-date-picker>
  70. </el-form-item>
  71. <el-form-item
  72. label="金额"
  73. prop="amount"
  74. :label-width="formLabelWidth"
  75. :rules="[
  76. { required: true, message: '编码不能为空'},
  77. // { type: 'number', message: '排序必须为数字值'}
  78. ]"
  79. >
  80. <el-input style="width: 35% " v-model="form.amount" autocomplete="off"></el-input>
  81. </el-form-item>
  82. <el-form-item
  83. label="成本类型"
  84. prop="costTypeId"
  85. :label-width="formLabelWidth"
  86. :rules="[{ required: true, message: '类型不能为空'}]"
  87. >
  88. <el-select v-model="form.costTypeId" placeholder="请选择类型">
  89. <!-- <el-option key label="无" value></el-option> -->
  90. <el-option
  91. v-for="item in costTypeSelectData"
  92. :key="item.id"
  93. :label="item.code +'--'+ item.name"
  94. :value="item.id"
  95. ></el-option>
  96. </el-select>
  97. </el-form-item>
  98. <el-form-item
  99. label="归属部门"
  100. prop="deptId"
  101. :rules="[{ required: true, message: '归属部门不能为空'}]"
  102. :label-width="formLabelWidth"
  103. >
  104. <el-select v-model="form.deptId" placeholder="请选择部门" @change="getName">
  105. <!-- <el-option key label="无" value></el-option> -->
  106. <el-option
  107. v-for="item in teamSelectData"
  108. :key="item.id"
  109. :label="item.code +'--'+ item.name"
  110. :value="item.id"
  111. ></el-option>
  112. </el-select>
  113. </el-form-item>
  114. <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
  115. <el-select v-model="form.projectId" placeholder="请选择项目">
  116. <el-option key label="无" value></el-option>
  117. <el-option
  118. v-for="item in projectSelectData"
  119. :key="item.id"
  120. :label="item.code +'--'+ item.name"
  121. :value="item.id"
  122. ></el-option>
  123. </el-select>
  124. </el-form-item>
  125. <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
  126. <el-select v-model="form.toDeptId" placeholder="请选择部门">
  127. <el-option key label="无" value></el-option>
  128. <el-option
  129. v-for="item in teamSelectData"
  130. :key="item.id"
  131. :label="item.code +'--'+ item.name"
  132. :value="item.id"
  133. ></el-option>
  134. </el-select>
  135. </el-form-item>
  136. <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
  137. <el-select v-model="form.toProjectId" placeholder="请选择项目">
  138. <el-option key label="无" value></el-option>
  139. <el-option
  140. v-for="item in projectSelectData"
  141. :key="item.id"
  142. :label="item.code +'--'+ item.name"
  143. :value="item.id"
  144. ></el-option>
  145. </el-select>
  146. </el-form-item>
  147. <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
  148. <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
  149. </el-form-item>
  150. </el-form>
  151. <div slot="footer" class="dialog-footer">
  152. <el-button @click="resetForm('form')">取 消</el-button>
  153. <el-button type="primary" @click="submitForm('form')">确 定</el-button>
  154. </div>
  155. </el-dialog>
  156. </div>
  157. </template>
  158. <script>
  159. import {
  160. getTeamSelect,
  161. getProjectSelect,
  162. getProductSelect,
  163. getCostTeamSelect,
  164. getCostTypeSelect,
  165. addManage,
  166. getManageList,
  167. setManage
  168. } from "@/api/manageApi";
  169. import TitleBar from "../layout/titleBar/TitleBar.vue";
  170. import { formatTime } from "../../utils/common";
  171. export default {
  172. components: {
  173. TitleBar
  174. },
  175. data() {
  176. return {
  177. type: "",
  178. dialogFormVisible: false,
  179. addFlag: false,
  180. id: "",
  181. form: {
  182. deptId: "",
  183. projectId: "",
  184. costTypeId: 0,
  185. companyId: "",
  186. happenTime: "",
  187. incomeStatus: "",
  188. productId: "",
  189. remark: "",
  190. amount: "",
  191. toDeptId: "",
  192. toProjectId: "",
  193. deptName: "",
  194. code: "",
  195. name: "",
  196. status: "NORMAL",
  197. sort: ""
  198. },
  199. pageNo: 1,
  200. pageSize: 50,
  201. formLabelWidth: "120px",
  202. totalSum: 0,
  203. teamSelectData: [],
  204. projectSelectData: [],
  205. productSelectData: [],
  206. costTeamSelectData: [],
  207. costTypeSelectData: [],
  208. manageData: [],
  209. companyData: []
  210. };
  211. },
  212. created() {
  213. // const isSuper = sessionStorage.getItem("isSuper");
  214. // if (isSuper === 'false') {
  215. // this.$message.warning({
  216. // message: "没有权限"
  217. // });
  218. // window.location.href = "/query/";
  219. // return;
  220. // }
  221. // 获取部门下拉框
  222. getTeamSelect().then(res => {
  223. this.teamSelectData = res.data;
  224. this.form.deptId = res.data[0].id;
  225. });
  226. // 获取项目下拉框
  227. getProjectSelect().then(res => {
  228. this.projectSelectData = res.data;
  229. });
  230. //获取产品下拉框
  231. getProductSelect().then(res => {
  232. this.productSelectData = res.data;
  233. });
  234. //获取经营列表
  235. getManageList({
  236. type: "COST",
  237. isEntry: true,
  238. pageNo: 1,
  239. pageSize: 50
  240. }).then(res => {
  241. this.manageData = res.data.content;
  242. this.totalNumber = parseInt(res.data.totalElements);
  243. });
  244. //获取单位下拉
  245. getCostTeamSelect().then(res => {
  246. this.costTeamSelectData = res.data;
  247. });
  248. //获取成本类型下拉
  249. getCostTypeSelect().then(res => {
  250. this.costTypeSelectData = res.data;
  251. this.form.costTypeId = res.data[0].id;
  252. });
  253. },
  254. methods: {
  255. // 金额格式化
  256. moneyFormat(row) {
  257. return row.amount.toFixed(2);
  258. },
  259. // 切换页码
  260. handlePageChange(val) {
  261. getManageList({
  262. type: "COST",
  263. pageNo: val,
  264. pageSize: 50,
  265. isEntry: true
  266. }).then(res => {
  267. this.manageData = res.data.content;
  268. this.totalNumber = parseInt(res.data.totalElements);
  269. });
  270. },
  271. tableRowClassName({ row, rowIndex }) {
  272. if (row.type === "COST") {
  273. return "cost-row";
  274. } else {
  275. return "income-row";
  276. }
  277. return "";
  278. },
  279. isDel({ row, rowIndex }) {
  280. if (row.status === "DEL") {
  281. return "isDel";
  282. }
  283. },
  284. //获取部门名称
  285. getName(val) {
  286. let obj = {};
  287. obj = this.teamSelectData.find(item => {
  288. return item.id === val;
  289. });
  290. let getName = "";
  291. this.form.deptName = obj.name;
  292. },
  293. // 添加
  294. append(type) {
  295. this.type = type;
  296. this.dialogFormVisible = true;
  297. this.addFlag = true;
  298. },
  299. // 编辑
  300. handleEdit(index, row) {
  301. console.log(row);
  302. //回显赋值
  303. this.type = row.type;
  304. this.form.deptId = row.department ? row.department.id : "";
  305. this.form.projectId = row.project ? row.project.id : "";
  306. this.form.code = row.code;
  307. this.form.happenTime = row.happenTime;
  308. this.form.incomeStatus = row.incomeStatus;
  309. this.form.productId = row.productId;
  310. this.form.remark = row.remark;
  311. this.form.amount = row.amount;
  312. this.form.name = row.name;
  313. this.form.toDeptId = row.toDeptId;
  314. this.form.toProjectId = row.toProjectId;
  315. this.form.sort = row.sort;
  316. this.form.costTypeId = row.costTypeId;
  317. this.form.companyId = row.companyId;
  318. this.id = row.id;
  319. this.dialogFormVisible = true;
  320. this.addFlag = false;
  321. },
  322. // 作废一条
  323. handleAbandon(index, row) {
  324. console.log(index);
  325. console.log(row);
  326. const temp = {};
  327. temp.id = row.id;
  328. temp.status = "DEL";
  329. setManage(temp).then(res => {
  330. console.log(res);
  331. // 刷新列表
  332. getManageList({
  333. type: "COST",
  334. pageNo: this.pageNo,
  335. pageSize: 50,
  336. isEntry: true
  337. }).then(res => {
  338. this.manageData = res.data.content;
  339. this.totalSize = res.data.totalPages;
  340. });
  341. });
  342. this.$message({
  343. message: "操作成功",
  344. type: "success"
  345. });
  346. },
  347. // 提交新增
  348. submitForm(formName) {
  349. //验证表单
  350. this.$refs[formName].validate((valid, value) => {
  351. if (valid) {
  352. this.form.happenTime = new Date(this.form.happenTime) * 1;
  353. this.form.type = this.type;
  354. if (this.addFlag) {
  355. addManage(this.form).then(res => {
  356. console.log(res);
  357. //获取经营列表
  358. getManageList({
  359. type: "COST",
  360. pageNo: 1,
  361. pageSize: 50,
  362. isEntry: true
  363. }).then(res => {
  364. this.manageData = res.data.content;
  365. this.totalSize = res.data.totalPages;
  366. });
  367. this.$refs[formName].resetFields();
  368. this.$message({
  369. message: "添加成功",
  370. type: "success"
  371. });
  372. });
  373. } else {
  374. this.form.id = this.id;
  375. setManage(this.form).then(res => {
  376. //获取经营列表
  377. getManageList({
  378. type: "COST"
  379. }).then(res => {
  380. this.manageData = res.data;
  381. });
  382. this.$refs[formName].resetFields();
  383. this.$message({
  384. message: "修改成功",
  385. type: "success"
  386. });
  387. });
  388. }
  389. this.dialogFormVisible = false;
  390. } else {
  391. return false;
  392. }
  393. });
  394. },
  395. // 取消
  396. resetForm(formName) {
  397. this.$refs[formName].resetFields();
  398. this.dialogFormVisible = false;
  399. },
  400. // 格式化时间
  401. dateFormat(row, column) {
  402. return formatTime(row.happenTime);
  403. },
  404. recordTimeFormat(row) {
  405. return formatTime(row.gmtModified);
  406. }
  407. }
  408. };
  409. </script>
  410. <style scope>
  411. .manage {
  412. padding: 20px;
  413. /* padding-top: 0; */
  414. box-sizing: border-box;
  415. }
  416. .add-container {
  417. float: right;
  418. margin-bottom: 20px;
  419. }
  420. .right-card {
  421. width: 100%;
  422. margin: 0 auto;
  423. }
  424. .demo-table-expand {
  425. font-size: 0;
  426. }
  427. .demo-table-expand label {
  428. width: 90px;
  429. color: #99a9bf;
  430. }
  431. .demo-table-expand .el-form-item {
  432. margin-right: 0;
  433. margin-bottom: 0;
  434. width: 50%;
  435. }
  436. .el-table .cost-row {
  437. color: green;
  438. }
  439. .el-table .income-row {
  440. color: red;
  441. }
  442. .isDel {
  443. color: #aaa;
  444. text-decoration: line-through;
  445. }
  446. </style>