query_20190319163121.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  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="状态" :filters="[{ text: '开票/应收', value: 'INVOICE' }, { text: '到账', value: 'INVOICE' }, { text: '内部核算', value: 'INTERNAL' }]"></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. searchResult: [],
  105. form: {
  106. type: "",
  107. productId: "",
  108. projectId: "",
  109. toDeptId: "",
  110. toProjectId: "",
  111. deptId: "",
  112. incomeStatus: "",
  113. status: "NORMAL",
  114. costTypeId: ""
  115. },
  116. formLabelWidth: "120px",
  117. teamSelectData: [],
  118. projectSelectData: [],
  119. productSelectData: [],
  120. costTeamSelectData: [],
  121. costTypeSelectData: [],
  122. manageData: [],
  123. companyData: []
  124. };
  125. },
  126. created() {
  127. // 获取部门下拉框
  128. getTeamSelect().then(res => {
  129. this.teamSelectData = res.data.data;
  130. });
  131. // 获取项目下拉框
  132. getProjectSelect().then(res => {
  133. this.projectSelectData = res.data.data;
  134. });
  135. //获取产品下拉框
  136. getProductSelect().then(res => {
  137. this.productSelectData = res.data.data;
  138. });
  139. //获取经营列表
  140. getManageList({
  141. type: "INCOME"
  142. }).then(res => {
  143. this.manageData = res.data.data;
  144. console.log(res.data.data);
  145. });
  146. //获取单位下拉
  147. getCostTeamSelect().then(res => {
  148. this.costTeamSelectData = res.data.data;
  149. });
  150. //获取成本类型下拉
  151. getCostTypeSelect().then(res => {
  152. this.costTypeSelectData = res.data.data;
  153. });
  154. },
  155. methods: {
  156. onSubmit() {
  157. this.$fetch("manageBase/manage", this.form).then(response => {
  158. console.log(response);
  159. this.searchResult = response.data;
  160. });
  161. },
  162. tableRowClassName({ row, rowIndex }) {
  163. if (row.type === "COST") {
  164. return "cost-row";
  165. } else {
  166. return "income-row";
  167. }
  168. return "";
  169. },
  170. //获取部门名称
  171. getName(val) {
  172. let obj = {};
  173. obj = this.teamSelectData.find(item => {
  174. return item.id === val;
  175. });
  176. let getName = "";
  177. this.form.deptName = obj.name;
  178. },
  179. // 添加
  180. append(type) {
  181. this.type = type;
  182. this.dialogFormVisible = true;
  183. this.addFlag = true;
  184. }
  185. }
  186. };
  187. </script>
  188. <style scope>
  189. .marginTop {
  190. margin-top: 20px;
  191. }
  192. </style>