index.vue 11 KB

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