pojpsnList.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. <template>
  2. <div class="app-container">
  3. <div class="btn_grooup">
  4. <el-button
  5. type="primary"
  6. plain
  7. icon="el-icon-plus"
  8. size="mini"
  9. @click="handleAdd"
  10. v-if="bo.winningState == 0 && bo.principal == $store.state.user.name"
  11. >新增</el-button>
  12. </div>
  13. <el-table
  14. v-loading="loading"
  15. :data="pojpsnList"
  16. @selection-change="handleSelectionChange"
  17. >
  18. <el-table-column type="index" label="序号" width="55" align="center"/>
  19. <el-table-column
  20. label="商机名称"
  21. align="center"
  22. prop="boName"
  23. v-if="source == 'Pojpsn'"
  24. />
  25. <el-table-column label="员工名称" align="center" prop="staffName" />
  26. <el-table-column label="项目岗位" align="center" prop="post">
  27. <template slot-scope="scope">
  28. <dict-tag
  29. :options="dict.type.mk_bo_pojpsn_post"
  30. :value="scope.row.post"
  31. />
  32. </template>
  33. </el-table-column>
  34. <el-table-column label="职责" align="center" prop="jobs" width="400">
  35. <template slot-scope="scope">
  36. <el-select v-model="scope.row.jobs" multiple disabled size="medium">
  37. <el-option
  38. v-for="item in mk_bo_pojpsn_job"
  39. :key="item.code"
  40. :label="item.name"
  41. :value="item.code"
  42. >
  43. </el-option>
  44. </el-select>
  45. </template>
  46. </el-table-column>
  47. <el-table-column
  48. label="操作"
  49. fixed="right"
  50. align="center"
  51. class-name="small-padding fixed-width"
  52. >
  53. <template slot-scope="scope">
  54. <el-button
  55. size="mini"
  56. type="text"
  57. icon="el-icon-edit"
  58. @click="handleUpdate(scope.row)"
  59. v-if="bo.winningState == 0 && bo.principal == $store.state.user.name"
  60. >修改</el-button
  61. >
  62. <el-button
  63. size="mini"
  64. type="text"
  65. icon="el-icon-delete"
  66. @click="handleDelete(scope.row)"
  67. v-if="bo.winningState == 0 && bo.principal == $store.state.user.name"
  68. >删除</el-button
  69. >
  70. </template>
  71. </el-table-column>
  72. </el-table>
  73. <pagination
  74. v-show="total > 0"
  75. :total="total"
  76. :page.sync="queryParams.pageNum"
  77. :limit.sync="queryParams.pageSize"
  78. @pagination="getList"
  79. />
  80. <!-- 添加或修改项目成员对话框 -->
  81. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  82. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  83. <!-- <el-form-item label="商机名称" prop="boName">
  84. <el-input v-model="form.boName" placeholder="商机名称" />
  85. </el-form-item> -->
  86. <el-form-item label="员工" prop="staffName">
  87. <el-input
  88. v-model="form.staffName"
  89. :disabled="this.operatingState != 'Insert'"
  90. >
  91. <el-button
  92. slot="append"
  93. icon="el-icon-more"
  94. @click="refereStaff"
  95. :disabled="this.operatingState != 'Insert'"
  96. ></el-button>
  97. </el-input>
  98. </el-form-item>
  99. <el-form-item label="项目岗位" prop="post">
  100. <el-select v-model="form.post" placeholder="请选择项目岗位" disabled>
  101. <el-option
  102. v-for="dict in dict.type.mk_bo_pojpsn_post"
  103. :key="dict.value"
  104. :label="dict.label"
  105. :value="dict.value"
  106. ></el-option>
  107. </el-select>
  108. </el-form-item>
  109. <el-form-item label="职责" prop="jobs">
  110. <el-select v-model="form.jobs" multiple placeholder="请选择职责">
  111. <el-option
  112. v-for="item in mk_bo_pojpsn_job"
  113. :key="item.code"
  114. :label="item.name"
  115. :value="item.code"
  116. >
  117. </el-option>
  118. </el-select>
  119. </el-form-item>
  120. </el-form>
  121. <div slot="footer">
  122. <el-button type="primary" @click="submitForm" :disabled="submitButtonEditStatus">确 定</el-button>
  123. <el-button @click="cancel">取 消</el-button>
  124. </div>
  125. </el-dialog>
  126. <!-- 员工参照 -->
  127. <StaffRef
  128. ref="contractSelect"
  129. @doSubmit="selectionsToInput"
  130. :single="true"
  131. />
  132. </div>
  133. </template>
  134. <script>
  135. import {
  136. listPojpsn,
  137. getPojpsn,
  138. delPojpsn,
  139. addPojpsn,
  140. updatePojpsn,
  141. } from "@/api/business/spd/bo/pojpsn";
  142. import StaffRef from "@/views/business/spd/bo/refer/staff/index.vue";
  143. import { getBoJobListByType } from "@/api/business/spd/bo/boJob";
  144. export default {
  145. name: "pojpsnList",
  146. props: ["source", "bo","boAuthority"],
  147. dicts: ["mk_bo_pojpsn_post",],
  148. components: { StaffRef },
  149. data() {
  150. return {
  151. // 遮罩层
  152. loading: true,
  153. // 选中数组
  154. ids: [],
  155. // 非单个禁用
  156. single: true,
  157. // 非多个禁用
  158. multiple: true,
  159. // 显示搜索条件
  160. showSearch: true,
  161. // 总条数
  162. total: 0,
  163. // 项目成员表格数据
  164. pojpsnList: [],
  165. // 弹出层标题
  166. title: "",
  167. // 是否显示弹出层
  168. open: false,
  169. // 查询参数
  170. queryParams: {
  171. pageNum: 1,
  172. pageSize: 10,
  173. bo: null,
  174. boName: null,
  175. staffName: null,
  176. post: null,
  177. job: null,
  178. },
  179. // 表单参数
  180. form: {},
  181. // 表单校验
  182. rules: {
  183. staffName: [
  184. { required: true, message: "员工不能为空", trigger: "blur" },
  185. ],
  186. post: [{ required: true, message: "岗位不能为空", trigger: "blur" }],
  187. jobs: [{ required: true, message: "职责不能为空", trigger: "blur" }],
  188. },
  189. //当前操作状态
  190. operatingState: "",
  191. pojpsnAuthority:{
  192. pojpsnAdd:true,
  193. pojpsnDel:true,
  194. pojpsnEdit:true,
  195. pojpsnView:true,
  196. },
  197. //职责列表
  198. mk_bo_pojpsn_job:[],
  199. //确定按钮是否可点
  200. submitButtonEditStatus:false,
  201. };
  202. },
  203. created() {
  204. if (this.source == "Pojpsn") {
  205. this.queryParams = this.bo;
  206. }
  207. if (this.source == "BoDetails") {
  208. this.queryParams.bo = this.bo.id;
  209. this.pojpsnAuthority = this.boAuthority.boAuthority;
  210. }
  211. getBoJobListByType(this.bo.boType).then((response) => {
  212. this.mk_bo_pojpsn_job = response.rows;
  213. this.getList();
  214. });
  215. },
  216. methods: {
  217. /** 查询项目成员列表 */
  218. getList() {
  219. this.loading = true;
  220. listPojpsn(this.queryParams).then((response) => {
  221. this.pojpsnList = response.rows;
  222. this.total = response.total;
  223. this.loading = false;
  224. });
  225. },
  226. // 取消按钮
  227. cancel() {
  228. this.open = false;
  229. this.reset();
  230. this.jobs = [];
  231. },
  232. // 表单重置
  233. reset() {
  234. this.form = {
  235. id: null,
  236. bo: null,
  237. boName: null,
  238. staff: null,
  239. staffName: null,
  240. post: null,
  241. job: null,
  242. tenantId: null,
  243. revision: null,
  244. createBy: null,
  245. createTime: null,
  246. updateBy: null,
  247. updateTime: null,
  248. delFlag: null,
  249. };
  250. this.resetForm("form");
  251. },
  252. /** 搜索按钮操作 */
  253. handleQuery() {
  254. this.queryParams.pageNum = 1;
  255. this.getList();
  256. },
  257. /** 重置按钮操作 */
  258. resetQuery() {
  259. this.resetForm("queryForm");
  260. this.handleQuery();
  261. },
  262. // 多选框选中数据
  263. handleSelectionChange(selection) {
  264. this.ids = selection.map((item) => item.id);
  265. this.single = selection.length !== 1;
  266. this.multiple = !selection.length;
  267. },
  268. /** 新增按钮操作 */
  269. handleAdd() {
  270. this.operatingState = "Insert";
  271. this.reset();
  272. if (this.source == "BoDetails") {
  273. this.form.bo = this.bo.id;
  274. this.form.boName = this.bo.boName;
  275. this.form.post = "1";
  276. }
  277. this.open = true;
  278. this.title = "添加项目成员";
  279. },
  280. /** 修改按钮操作 */
  281. handleUpdate(row) {
  282. this.operatingState = "Update";
  283. this.reset();
  284. const id = row.id || this.ids;
  285. getPojpsn(id).then((response) => {
  286. this.form = response.data;
  287. this.open = true;
  288. this.title = "修改项目成员";
  289. });
  290. },
  291. /** 提交按钮 */
  292. submitForm() {
  293. this.submitButtonEditStatus = true;
  294. this.$refs["form"].validate((valid) => {
  295. if (valid) {
  296. if (this.form.id != null) {
  297. updatePojpsn(this.form).then((response) => {
  298. this.$modal.msgSuccess("修改成功");
  299. this.open = false;
  300. this.getList();
  301. this.submitButtonEditStatus = false;
  302. });
  303. } else {
  304. addPojpsn(this.form).then((response) => {
  305. this.$modal.msgSuccess("新增成功");
  306. this.open = false;
  307. this.getList();
  308. this.submitButtonEditStatus = false;
  309. });
  310. }
  311. }else{
  312. this.submitButtonEditStatus = false;
  313. }
  314. });
  315. },
  316. /** 删除按钮操作 */
  317. handleDelete(row) {
  318. const ids = row.id || this.ids;
  319. this.$modal
  320. .confirm('是否确认删除项目成员编号为"' + ids + '"的数据项?')
  321. .then(function () {
  322. return delPojpsn(ids);
  323. })
  324. .then(() => {
  325. this.getList();
  326. this.$modal.msgSuccess("删除成功");
  327. })
  328. .catch(() => {});
  329. },
  330. /** 导出按钮操作 */
  331. handleExport() {
  332. this.download(
  333. "system/pojpsn/export",
  334. {
  335. ...this.queryParams,
  336. },
  337. `pojpsn_${new Date().getTime()}.xlsx`
  338. );
  339. },
  340. // 触发员工参照列表
  341. refereStaff() {
  342. console.log("测试点击");
  343. this.$refs.contractSelect.init();
  344. },
  345. //员工参照列表选择后
  346. selectionsToInput(selections) {
  347. this.form.staff = selections[0].userName;
  348. this.form.staffName = selections[0].nickName;
  349. },
  350. },
  351. };
  352. </script>
  353. <style lang="scss" scoped>
  354. .btn_grooup {
  355. margin-bottom: 10px;
  356. display: flex;
  357. justify-content: flex-end;
  358. }
  359. </style>