projectItem.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <div>
  3. <!-- 选择项目 -->
  4. <el-dialog
  5. title="选择项目"
  6. :visible.sync="showProjectItem"
  7. width="800px"
  8. append-to-body
  9. >
  10. <!-- 查询表单区域 -->
  11. <el-form :model="projectQueryParams" ref="queryForm" inline>
  12. <el-form-item label="项目名称" prop="projectName">
  13. <el-input
  14. v-model.trim="projectQueryParams.projectName"
  15. placeholder="请输入项目名称"
  16. clearable
  17. @keyup.enter.native="handleQuery"
  18. />
  19. </el-form-item>
  20. <!-- 可继续扩展其他查询表单项目,比如项目编号、负责人等 -->
  21. <el-form-item>
  22. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  23. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  24. </el-form-item>
  25. </el-form>
  26. <el-table
  27. class="tableWrapper"
  28. @row-click="clickRow"
  29. ref="dataTable"
  30. :data="poolList"
  31. @selection-change="handleSelectionChange"
  32. >
  33. <el-table-column type="selection" width="55" align="center" />
  34. <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
  35. <el-table-column label="项目名称" width="150" align="center" prop="projectName">
  36. <template slot-scope="scope">
  37. <div :title="scope.row.projectName">
  38. {{ scope.row.projectName }}
  39. </div>
  40. </template>
  41. </el-table-column>
  42. <el-table-column
  43. label="渠道"
  44. align="center"
  45. prop="tProjectChannel.channelName"
  46. >
  47. <template slot-scope="scope">
  48. <div :title="scope.row.tProjectChannel.channelName" v-if="scope.row.tProjectChannel && scope.row.tProjectChannel.channelName">
  49. {{ scope.row.tProjectChannel.channelName }}
  50. </div>
  51. <div v-else>无</div>
  52. </template>
  53. </el-table-column>
  54. <el-table-column
  55. label="所属组别"
  56. align="center"
  57. prop="tProjectChannel.channelGroup"
  58. >
  59. <template slot-scope="scope">
  60. <dict-tag
  61. v-if="scope.row.tProjectChannel && scope.row.tProjectChannel.channelGroup"
  62. :options="dict.type.project_group"
  63. :value="scope.row.tProjectChannel.channelGroup"
  64. />
  65. </template>
  66. </el-table-column>
  67. <!-- <el-table-column label="项目编号" align="center" prop="projectCode" /> -->
  68. <el-table-column label="项目负责人" align="center" prop="investHead" />
  69. <el-table-column label="项目阶段" align="center" prop="projectStage">
  70. <template slot-scope="scope">
  71. <dict-tag
  72. :options="dict.type.project_stage"
  73. :value="scope.row.projectStage"
  74. />
  75. </template>
  76. </el-table-column>
  77. <!-- <el-table-column label="项目状态" align="center" prop="projectState">
  78. <template slot-scope="scope">
  79. <dict-tag
  80. :options="dict.type.project_state"
  81. :value="scope.row.projectState"
  82. />
  83. </template>
  84. </el-table-column>-->
  85. <el-table-column label="项目机会状态" align="center" prop="projectStatus">
  86. <template slot-scope="scope">
  87. <!-- 定义状态文本映射对象 -->
  88. <el-tag
  89. :type="{
  90. 0: 'success',
  91. 1: 'danger',
  92. 2: 'warning'
  93. }[scope.row.projectStatus] || 'info'"
  94. >
  95. {{ {
  96. 0: '正常',
  97. 1: '终止',
  98. 2: '观望'
  99. }[scope.row.projectStatus] || '未知状态' }}
  100. </el-tag>
  101. </template>
  102. </el-table-column>
  103. <el-table-column
  104. label="已发起投决申请"
  105. align="center"
  106. prop="decisionFlag"
  107. >
  108. <template slot-scope="scope">
  109. <div>
  110. {{ scope.row.decisionFlag === "1" ? "是" : "否" }}
  111. </div>
  112. </template>
  113. </el-table-column>
  114. </el-table>
  115. <pagination
  116. v-show="projectItemTotal > 0"
  117. :total="projectItemTotal"
  118. :page.sync="projectQueryParams.pageNum"
  119. :limit.sync="projectQueryParams.pageSize"
  120. @pagination="getList"
  121. />
  122. <div slot="footer" class="dialog-footer">
  123. <el-button type="primary" @click="submit" v-preventReClick
  124. >确 定</el-button
  125. >
  126. <el-button @click="cancel">取 消</el-button>
  127. </div>
  128. </el-dialog>
  129. </div>
  130. </template>
  131. <script>
  132. import { applicableListDecision } from "@/api/project/decision/pool";
  133. import { mapGetters } from "vuex";
  134. export default {
  135. props: {
  136. // showProjectItem: {
  137. // type: Boolean,
  138. // default: false,
  139. // },
  140. },
  141. dicts: ["project_group", "project_stage", "project_state"],
  142. data() {
  143. return {
  144. showProjectItem: false,
  145. // 总条数
  146. projectItemTotal: 0,
  147. poolList: [],
  148. projectQueryParams: {
  149. pageNum: 1,
  150. pageSize: 10,
  151. orderByColumn: "createTime",
  152. isAsc: "desc",
  153. projectStatus:null,
  154. projectName:null
  155. },
  156. // 选中数组
  157. ids: [],
  158. idsName: [],
  159. // 非单个禁用
  160. single: true,
  161. // 非多个禁用
  162. multiple: true,
  163. isWatch:false,
  164. };
  165. },
  166. computed: {
  167. ...mapGetters(["user"]),
  168. },
  169. mounted() {
  170. this.getList();
  171. },
  172. methods: {
  173. // 刷新项目列表的方法
  174. refreshProjectList(isWatch) {
  175. // 清空现有列表
  176. this.poolList = [];
  177. this.projectItemTotal=0;
  178. // 重新请求接口获取最新数据
  179. this.getList(isWatch);
  180. this.isWatch=isWatch;
  181. },
  182. clickRow(row) {
  183. this.$refs.dataTable.toggleRowSelection(row);
  184. },
  185. // 多选框选中数据
  186. handleSelectionChange(selection) {
  187. if (selection.length > 1) {
  188. //移除上一次选中行数据
  189. selection.shift();
  190. //修改选中图标为未选中状态
  191. this.$refs.dataTable.clearSelection();
  192. //将当前选中行改为选中状态
  193. this.$refs.dataTable.toggleRowSelection(selection[0]);
  194. }
  195. this.ids = selection;
  196. },
  197. /** 查询项目池列表 */
  198. getList(isWatch) {
  199. if(isWatch){
  200. this.projectQueryParams.projectStatus=2;
  201. }else {
  202. this.projectQueryParams.projectStatus=0;
  203. }
  204. applicableListDecision(this.projectQueryParams).then((response) => {
  205. this.poolList = response.rows;
  206. this.projectItemTotal = response.total;
  207. });
  208. },
  209. submit() {
  210. // console.log("确定", this.ids);
  211. const row = this.ids[0];
  212. if (row.delFlag == "1") {
  213. this.$message({
  214. message: "项目已终止",
  215. duration: 1500,
  216. type: "error",
  217. });
  218. }
  219. if (row.investHead === this.user.nickName){
  220. if (row.decisionFlag == "0") {
  221. this.$emit("getProjectInfo", this.ids);
  222. this.showProjectItem = false;
  223. } else {
  224. this.$message({
  225. message: "您已发起投决申请,无需重复操作",
  226. duration: 1500,
  227. type: "warning",
  228. });
  229. }
  230. }else {
  231. this.$message({
  232. message: "无权限",
  233. duration: 1500,
  234. type: "error",
  235. });
  236. }
  237. },
  238. cancel() {
  239. this.showProjectItem = false;
  240. },
  241. /** 搜索按钮操作 */
  242. handleQuery() {
  243. this.projectQueryParams.pageNum = 1;
  244. this.getList(this.isWatch);
  245. },
  246. /** 重置按钮操作 */
  247. resetQuery() {
  248. this.resetForm("queryForm");
  249. this.handleQuery();
  250. },
  251. },
  252. };
  253. </script>