query_20190319162726.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <div>
  3. <el-form :inline="true" :model="form" ref="form" class="marginTop">
  4. <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
  5. <el-select v-model="form.productId" placeholder="请选择产品">
  6. <el-option key label="不选" value></el-option>
  7. <el-option
  8. v-for="item in productSelectData"
  9. :key="item.id"
  10. :label="item.name"
  11. :value="item.id"
  12. ></el-option>
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
  16. <el-select v-model="form.projectId" placeholder="请选择项目">
  17. <el-option key label="不选" value></el-option>
  18. <el-option
  19. v-for="item in projectSelectData"
  20. :key="item.id"
  21. :label="item.name"
  22. :value="item.id"
  23. ></el-option>
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
  27. <el-select v-model="form.toDeptId" placeholder="请选择部门">
  28. <el-option key label="不选" value></el-option>
  29. <el-option
  30. v-for="item in teamSelectData"
  31. :key="item.id"
  32. :label="item.name"
  33. :value="item.id"
  34. ></el-option>
  35. </el-select>
  36. </el-form-item>
  37. <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
  38. <el-select v-model="form.toProjectId" placeholder="请选择项目">
  39. <el-option key label="不选" value></el-option>
  40. <el-option
  41. v-for="item in projectSelectData"
  42. :key="item.id"
  43. :label="item.name"
  44. :value="item.id"
  45. ></el-option>
  46. </el-select>
  47. </el-form-item>
  48. <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
  49. <el-select v-model="form.deptId" placeholder="请选择部门" ref="select">
  50. <el-option key label="不选" value></el-option>
  51. <el-option
  52. v-for="item in teamSelectData"
  53. :key="item.id"
  54. :label="item.name"
  55. :value="item.id"
  56. ></el-option>
  57. </el-select>
  58. </el-form-item>
  59. <el-form-item label="类别" :label-width="formLabelWidth">
  60. <el-radio-group v-model="form.type" placeholder="请选择类别" size="medium">
  61. <el-radio border label="ICOME">收入</el-radio>
  62. <el-radio border label="COST">费用</el-radio>
  63. </el-radio-group>
  64. </el-form-item>
  65. <el-form-item label="状态" :label-width="formLabelWidth">
  66. <el-radio-group v-model="form.incomeStatus" placeholder="请选择状态值" size="medium">
  67. <el-radio border label="INVOICE">开票/应收</el-radio>
  68. <el-radio border label="ARRIVAL">到账</el-radio>
  69. <el-radio border label="INTERNAL">内部核算</el-radio>
  70. </el-radio-group>
  71. </el-form-item>
  72. <el-form-item>
  73. <el-button type="primary" @click="onSubmit">查询</el-button>
  74. </el-form-item>
  75. </el-form>
  76. <el-table :data="searchResult" style="width: 100%;margin-top:50px;">
  77. <el-table-column fixed prop="deptName" label="部门" ></el-table-column>
  78. <el-table-column prop="type" label="类型" ></el-table-column>
  79. <el-table-column prop="product.name" label="产品" ></el-table-column>
  80. <el-table-column prop="amount" label="金额" ></el-table-column>
  81. <el-table-column prop="incomeStatus" label="状态" ></el-table-column>
  82. <el-table-column prop="project.name" label="发生人/部门/单位" ></el-table-column>
  83. </el-table>
  84. </div>
  85. </template>
  86. <script>
  87. import {
  88. getTeamSelect,
  89. getProjectSelect,
  90. getProductSelect,
  91. getCostTeamSelect,
  92. getCostTypeSelect,
  93. addManage,
  94. getManageList,
  95. setManage
  96. } from "@/api/manageApi";
  97. export default {
  98. data() {
  99. return {
  100. type: "",
  101. dialogFormVisible: false,
  102. addFlag: false,
  103. id: "",
  104. form: {
  105. type: "",
  106. productId: "",
  107. projectId: "",
  108. toDeptId: "",
  109. toProjectId: "",
  110. deptId: "",
  111. incomeStatus: "",
  112. status: "NORMAL",
  113. costTypeId: ""
  114. },
  115. formLabelWidth: "120px",
  116. teamSelectData: [],
  117. projectSelectData: [],
  118. productSelectData: [],
  119. costTeamSelectData: [],
  120. costTypeSelectData: [],
  121. manageData: [],
  122. companyData: []
  123. };
  124. },
  125. created() {
  126. // 获取部门下拉框
  127. getTeamSelect().then(res => {
  128. this.teamSelectData = res.data.data;
  129. });
  130. // 获取项目下拉框
  131. getProjectSelect().then(res => {
  132. this.projectSelectData = res.data.data;
  133. });
  134. //获取产品下拉框
  135. getProductSelect().then(res => {
  136. this.productSelectData = res.data.data;
  137. });
  138. //获取经营列表
  139. getManageList({
  140. type: "INCOME"
  141. }).then(res => {
  142. this.manageData = res.data.data;
  143. console.log(res.data.data);
  144. });
  145. //获取单位下拉
  146. getCostTeamSelect().then(res => {
  147. this.costTeamSelectData = res.data.data;
  148. });
  149. //获取成本类型下拉
  150. getCostTypeSelect().then(res => {
  151. this.costTypeSelectData = res.data.data;
  152. });
  153. },
  154. methods: {
  155. onSubmit() {
  156. this.$fetch("manageBase/manage", this.form).then(response => {
  157. console.log(response);
  158. });
  159. },
  160. tableRowClassName({ row, rowIndex }) {
  161. if (row.type === "COST") {
  162. return "cost-row";
  163. } else {
  164. return "income-row";
  165. }
  166. return "";
  167. },
  168. //获取部门名称
  169. getName(val) {
  170. let obj = {};
  171. obj = this.teamSelectData.find(item => {
  172. return item.id === val;
  173. });
  174. let getName = "";
  175. this.form.deptName = obj.name;
  176. },
  177. // 添加
  178. append(type) {
  179. this.type = type;
  180. this.dialogFormVisible = true;
  181. this.addFlag = true;
  182. }
  183. }
  184. };
  185. </script>
  186. <style scope>
  187. .marginTop {
  188. margin-top: 20px;
  189. }
  190. </style>