cost.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <template>
  2. <div class="manage">
  3. <div class="add-container">
  4. <el-button type="primary" @click="append('COST')">增加成本</el-button>
  5. </div>
  6. <el-card class="right-card">
  7. <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
  8. <!-- <el-table-column type="expand">
  9. <template slot-scope="props">
  10. <el-form label-position="left" inline class="demo-table-expand">
  11. <el-form-item label="备注">
  12. <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
  13. </el-form-item>
  14. <el-form-item label="接收部门">
  15. <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
  16. </el-form-item>
  17. <el-form-item label="接受项目">
  18. <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
  19. </el-form-item>
  20. </el-form>
  21. </template>
  22. </el-table-column>-->
  23. <el-table-column label="成本类型" prop="costType.name"></el-table-column>
  24. <el-table-column label="归属部门" prop="department.name"></el-table-column>
  25. <el-table-column label="归属项目" prop="project.name"></el-table-column>
  26. <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
  27. <el-table-column label="接受项目" prop="toProject.name"></el-table-column>
  28. <el-table-column label="金额">
  29. <template slot-scope="props">
  30. <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
  31. </template>
  32. </el-table-column>
  33. <el-table-column label="备注" prop="remark"></el-table-column>
  34. <el-table-column label="操作" width="80">
  35. <template slot-scope="scope">
  36. <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</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>
  46. </el-card>
  47. <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
  48. <el-form :model="form" ref="form">
  49. <el-form-item
  50. label="发生时间"
  51. prop="happenTime"
  52. :label-width="formLabelWidth"
  53. :rules="[{ required: true, message: '名称不能为空'}]"
  54. >
  55. <el-date-picker v-model="form.happenTime" type="date" placeholder="接收日期"></el-date-picker>
  56. </el-form-item>
  57. <el-form-item
  58. label="金额"
  59. prop="amount"
  60. :label-width="formLabelWidth"
  61. :rules="[
  62. { required: true, message: '编码不能为空'},
  63. // { type: 'number', message: '排序必须为数字值'}
  64. ]"
  65. >
  66. <el-input style="width: 35% " v-model="form.amount" autocomplete="off"></el-input>
  67. </el-form-item>
  68. <el-form-item
  69. label="成本类型"
  70. prop="costTypeId"
  71. :label-width="formLabelWidth"
  72. :rules="[{ required: true, message: '状态不能为空'}]"
  73. >
  74. <el-select v-model="form.costTypeId" placeholder="请选择类型">
  75. <el-option key label="无" value></el-option>
  76. <el-option
  77. v-for="item in costTypeSelectData"
  78. :key="item.id"
  79. :label="item.name"
  80. :value="item.id"
  81. ></el-option>
  82. </el-select>
  83. </el-form-item>
  84. <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
  85. <el-select v-model="form.deptId" placeholder="请选择部门" @change="getName">
  86. <el-option key label="无" value></el-option>
  87. <el-option
  88. v-for="item in teamSelectData"
  89. :key="item.id"
  90. :label="item.name"
  91. :value="item.id"
  92. ></el-option>
  93. </el-select>
  94. </el-form-item>
  95. <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
  96. <el-select v-model="form.projectId" placeholder="请选择项目">
  97. <el-option key label="无" value></el-option>
  98. <el-option
  99. v-for="item in projectSelectData"
  100. :key="item.id"
  101. :label="item.name"
  102. :value="item.id"
  103. ></el-option>
  104. </el-select>
  105. </el-form-item>
  106. <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
  107. <el-select v-model="form.toDeptId" placeholder="请选择部门">
  108. <el-option key label="无" value></el-option>
  109. <el-option
  110. v-for="item in teamSelectData"
  111. :key="item.id"
  112. :label="item.name"
  113. :value="item.id"
  114. ></el-option>
  115. </el-select>
  116. </el-form-item>
  117. <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
  118. <el-select v-model="form.toProjectId" placeholder="请选择项目">
  119. <el-option key label="无" value></el-option>
  120. <el-option
  121. v-for="item in projectSelectData"
  122. :key="item.id"
  123. :label="item.name"
  124. :value="item.id"
  125. ></el-option>
  126. </el-select>
  127. </el-form-item>
  128. <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
  129. <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
  130. </el-form-item>
  131. </el-form>
  132. <div slot="footer" class="dialog-footer">
  133. <el-button @click="resetForm('form')">取 消</el-button>
  134. <el-button type="primary" @click="submitForm('form')">确 定</el-button>
  135. </div>
  136. </el-dialog>
  137. </div>
  138. </template>
  139. <script>
  140. import {
  141. getTeamSelect,
  142. getProjectSelect,
  143. getProductSelect,
  144. getCostTeamSelect,
  145. getCostTypeSelect,
  146. addManage,
  147. getManageList,
  148. setManage
  149. } from "@/api/manageApi";
  150. export default {
  151. data() {
  152. return {
  153. type: "",
  154. dialogFormVisible: false,
  155. addFlag: false,
  156. id: "",
  157. form: {
  158. deptId: "",
  159. projectId: "",
  160. costTypeId: "",
  161. companyId: "",
  162. happenTime: "",
  163. incomeStatus: "",
  164. productId: "",
  165. remark: "",
  166. amount: "",
  167. toDeptId: "",
  168. toProjectId: "",
  169. deptName: "",
  170. code: "",
  171. name: "",
  172. status: "NORMAL",
  173. sort: ""
  174. },
  175. formLabelWidth: "120px",
  176. teamSelectData: [],
  177. projectSelectData: [],
  178. productSelectData: [],
  179. costTeamSelectData: [],
  180. costTypeSelectData: [],
  181. manageData: [],
  182. companyData: []
  183. };
  184. },
  185. created() {
  186. // 获取部门下拉框
  187. getTeamSelect().then(res => {
  188. this.teamSelectData = res.data.data;
  189. });
  190. // 获取项目下拉框
  191. getProjectSelect().then(res => {
  192. this.projectSelectData = res.data.data;
  193. });
  194. //获取产品下拉框
  195. getProductSelect().then(res => {
  196. this.productSelectData = res.data.data;
  197. });
  198. //获取经营列表
  199. getManageList({
  200. type: "COST"
  201. }).then(res => {
  202. this.manageData = res.data.data;
  203. });
  204. //获取单位下拉
  205. getCostTeamSelect().then(res => {
  206. this.costTeamSelectData = res.data.data;
  207. });
  208. //获取成本类型下拉
  209. getCostTypeSelect().then(res => {
  210. this.costTypeSelectData = res.data.data;
  211. });
  212. },
  213. methods: {
  214. tableRowClassName({ row, rowIndex }) {
  215. if (row.type === "COST") {
  216. return "cost-row";
  217. } else {
  218. return "income-row";
  219. }
  220. return "";
  221. },
  222. //获取部门名称
  223. getName(val) {
  224. let obj = {};
  225. obj = this.teamSelectData.find(item => {
  226. return item.id === val;
  227. });
  228. let getName = "";
  229. this.form.deptName = obj.name;
  230. },
  231. // 添加
  232. append(type) {
  233. this.type = type;
  234. this.dialogFormVisible = true;
  235. this.addFlag = true;
  236. },
  237. // 编辑
  238. handleEdit(index, row) {
  239. console.log(row);
  240. //回显赋值
  241. this.type = row.type;
  242. this.form.deptId = row.department.id;
  243. this.form.projectId = row.project.id;
  244. this.form.code = row.code;
  245. this.form.happenTime = row.happenTime;
  246. this.form.incomeStatus = row.incomeStatus;
  247. this.form.productId = row.productId;
  248. this.form.remark = row.remark;
  249. this.form.amount = row.amount;
  250. this.form.name = row.name;
  251. this.form.toDeptId = row.toDeptId;
  252. this.form.toProjectId = row.toProjectId;
  253. this.form.sort = row.sort;
  254. this.form.costTypeId = row.costTypeId;
  255. this.form.companyId = row.companyId;
  256. this.id = row.id;
  257. this.dialogFormVisible = true;
  258. this.addFlag = false;
  259. },
  260. // 提交新增
  261. submitForm(formName) {
  262. //验证表单
  263. this.$refs[formName].validate((valid, value) => {
  264. if (valid) {
  265. this.form.happenTime = new Date(this.form.happenTime) * 1;
  266. this.form.type = this.type;
  267. if (this.addFlag) {
  268. addManage(this.form).then(res => {
  269. console.log(res);
  270. //获取经营列表
  271. getManageList({
  272. type: "COST"
  273. }).then(res => {
  274. this.manageData = res.data.data;
  275. });
  276. this.$refs[formName].resetFields();
  277. });
  278. } else {
  279. this.form.id = this.id;
  280. setManage(this.form).then(res => {
  281. //获取经营列表
  282. getManageList({
  283. type: "COST"
  284. }).then(res => {
  285. this.manageData = res.data.data;
  286. });
  287. this.$refs[formName].resetFields();
  288. });
  289. }
  290. this.dialogFormVisible = false;
  291. } else {
  292. return false;
  293. }
  294. });
  295. },
  296. // 取消
  297. resetForm(formName) {
  298. this.$refs[formName].resetFields();
  299. this.dialogFormVisible = false;
  300. }
  301. }
  302. };
  303. </script>
  304. <style scope>
  305. .manage {
  306. padding: 20px;
  307. box-sizing: border-box;
  308. }
  309. .add-container {
  310. float: right;
  311. margin-bottom: 20px;
  312. }
  313. .right-card {
  314. width: 100%;
  315. margin: 0 auto;
  316. }
  317. .demo-table-expand {
  318. font-size: 0;
  319. }
  320. .demo-table-expand label {
  321. width: 90px;
  322. color: #99a9bf;
  323. }
  324. .demo-table-expand .el-form-item {
  325. margin-right: 0;
  326. margin-bottom: 0;
  327. width: 50%;
  328. }
  329. .el-table .cost-row {
  330. color: green;
  331. }
  332. .el-table .income-row {
  333. color: red;
  334. }
  335. </style>