query_20190319164008.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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 label="状态">
  82. <template slot-scope="props">
  83. <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
  84. </template>
  85. </el-table-column>
  86. <el-table-column prop="project.name" label="发生人/部门/单位" ></el-table-column>
  87. </el-table>
  88. </div>
  89. </template>
  90. <script>
  91. import {
  92. getTeamSelect,
  93. getProjectSelect,
  94. getProductSelect,
  95. getCostTeamSelect,
  96. getCostTypeSelect,
  97. addManage,
  98. getManageList,
  99. setManage
  100. } from "@/api/manageApi";
  101. export default {
  102. data() {
  103. return {
  104. type: "",
  105. dialogFormVisible: false,
  106. addFlag: false,
  107. id: "",
  108. searchResult: [],
  109. form: {
  110. type: "",
  111. productId: "",
  112. projectId: "",
  113. toDeptId: "",
  114. toProjectId: "",
  115. deptId: "",
  116. incomeStatus: "",
  117. status: "NORMAL",
  118. costTypeId: ""
  119. },
  120. formLabelWidth: "120px",
  121. teamSelectData: [],
  122. projectSelectData: [],
  123. productSelectData: [],
  124. costTeamSelectData: [],
  125. costTypeSelectData: [],
  126. manageData: [],
  127. companyData: []
  128. };
  129. },
  130. created() {
  131. // 获取部门下拉框
  132. getTeamSelect().then(res => {
  133. this.teamSelectData = res.data.data;
  134. });
  135. // 获取项目下拉框
  136. getProjectSelect().then(res => {
  137. this.projectSelectData = res.data.data;
  138. });
  139. //获取产品下拉框
  140. getProductSelect().then(res => {
  141. this.productSelectData = res.data.data;
  142. });
  143. //获取经营列表
  144. getManageList({
  145. type: "INCOME"
  146. }).then(res => {
  147. this.manageData = res.data.data;
  148. console.log(res.data.data);
  149. });
  150. //获取单位下拉
  151. getCostTeamSelect().then(res => {
  152. this.costTeamSelectData = res.data.data;
  153. });
  154. //获取成本类型下拉
  155. getCostTypeSelect().then(res => {
  156. this.costTypeSelectData = res.data.data;
  157. });
  158. },
  159. methods: {
  160. onSubmit() {
  161. this.$fetch("manageBase/manage", this.form).then(response => {
  162. console.log(response);
  163. this.searchResult = response.data;
  164. });
  165. },
  166. tableRowClassName({ row, rowIndex }) {
  167. if (row.type === "COST") {
  168. return "cost-row";
  169. } else {
  170. return "income-row";
  171. }
  172. return "";
  173. },
  174. //获取部门名称
  175. getName(val) {
  176. let obj = {};
  177. obj = this.teamSelectData.find(item => {
  178. return item.id === val;
  179. });
  180. let getName = "";
  181. this.form.deptName = obj.name;
  182. },
  183. // 添加
  184. append(type) {
  185. this.type = type;
  186. this.dialogFormVisible = true;
  187. this.addFlag = true;
  188. }
  189. }
  190. };
  191. </script>
  192. <style scope>
  193. .marginTop {
  194. margin-top: 20px;
  195. }
  196. </style>