create.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <template>
  2. <div>
  3. <el-form ref="form" :model="form" inline>
  4. <el-row>
  5. <el-col :span="6">
  6. <el-form-item
  7. label="分部"
  8. prop="organId"
  9. :rules="[{required: true, message: '请选择分部'}]"
  10. >
  11. <el-select
  12. clearable
  13. filterable
  14. v-model="form.organId"
  15. :disabled="!isCreate"
  16. placeholder="请选择分部"
  17. >
  18. <el-option v-for="(item,index) in selects.branchs"
  19. :key="index"
  20. :label="item.name"
  21. :value="item.id"></el-option>
  22. </el-select>
  23. </el-form-item>
  24. </el-col>
  25. <el-col :span="6">
  26. <el-form-item
  27. label="工作周期"
  28. prop="month"
  29. :rules="[{required: true, message: '请选择工作周期'}]"
  30. >
  31. <el-date-picker
  32. v-model="form.month"
  33. :disabled="!isCreate"
  34. type="month"
  35. placeholder="请选择工作周期">
  36. </el-date-picker>
  37. </el-form-item>
  38. </el-col>
  39. </el-row>
  40. <el-row class="group" v-for="(groupItem, groupIndex) in form.group" :key="groupIndex">
  41. <el-col :span="6">
  42. <el-form-item
  43. label="乐团主管"
  44. :prop="`group.${groupIndex}.userId`"
  45. :rules="[{required: true, message: '请选择乐团主管'}]"
  46. >
  47. <el-select
  48. clearable
  49. filterable
  50. v-model="groupItem.userId"
  51. :disabled="!isCreate"
  52. placeholder="请选择乐团主管"
  53. >
  54. <el-option v-for="(item,index) in technicians"
  55. :key="index"
  56. :label="item.realName"
  57. :disabled="form.group.map(m => m.userId).includes(item.id)"
  58. :value="item.id"></el-option>
  59. </el-select>
  60. </el-form-item>
  61. </el-col>
  62. <template v-for="(matterItem, matterIndex) in groupItem.matter">
  63. <el-col :offset="matterIndex === 0 ? 0 : 6" :span="6" :key="groupIndex + '-' + matterIndex + '1'">
  64. <el-form-item
  65. :label="'任务事项' + (matterIndex + 1)"
  66. :prop="`group.${groupIndex}.matter.${matterIndex}.item`"
  67. >
  68. <el-select
  69. clearable
  70. filterable
  71. v-model="matterItem.item"
  72. placeholder="请选择任务事项"
  73. >
  74. <el-option v-for="(item,index) in matterTypesOptions"
  75. :key="index"
  76. :label="item.label"
  77. :disabled="groupItem.matter.map(m => m.item).includes(item.value)"
  78. :value="item.value"></el-option>
  79. </el-select>
  80. </el-form-item>
  81. </el-col>
  82. <el-col :span="6" :key="groupIndex + '-' + matterIndex + '2'">
  83. <el-form-item
  84. :label="'任务次数' + (matterIndex + 1)"
  85. :prop="`group.${groupIndex}.matter.${matterIndex}.times`"
  86. >
  87. <el-input clearable v-model="matterItem.times" placeholder="请输入次数" />
  88. </el-form-item>
  89. </el-col>
  90. <el-col :span="6" :key="groupIndex + '-' + matterIndex + '3'">
  91. <div class="ctrl">
  92. <span>
  93. <el-tooltip content="添加任务" placement="top" :open-delay=".5">
  94. <el-button
  95. icon="el-icon-plus"
  96. @click="createMatter(groupItem.matter)"
  97. circle
  98. size="small"
  99. ></el-button>
  100. </el-tooltip>
  101. <el-tooltip content="删除任务" placement="top" :open-delay=".5">
  102. <el-button
  103. icon="el-icon-minus"
  104. circle
  105. size="small"
  106. @click="removeMatter(groupItem.matter, matterIndex)"
  107. :disabled="groupItem.matter.length <= 1"
  108. ></el-button>
  109. </el-tooltip>
  110. </span>
  111. <el-tooltip v-if="isCreate" content="删除乐团主管" placement="top" :open-delay=".5">
  112. <el-button
  113. icon="el-icon-delete"
  114. circle
  115. type="danger"
  116. size="small"
  117. v-if="matterIndex === 0"
  118. @click="removeGroup(form.group, groupIndex)"
  119. :disabled="form.group.length <= 1"
  120. ></el-button>
  121. </el-tooltip>
  122. </div>
  123. </el-col>
  124. </template>
  125. </el-row>
  126. <el-button v-if="isCreate" @click="createGroup" plain block style="width: 100%">添加乐团主管</el-button>
  127. </el-form>
  128. <div slot="footer" style="text-align: right;margin-top: 20px;">
  129. <el-button @click="$emit('close')">取消</el-button>
  130. <el-button type="primary" @click="submit">确认</el-button>
  131. </div>
  132. </div>
  133. </template>
  134. <script>
  135. import { queryEmployByOrganId } from '@/api/systemManage'
  136. import { matterTypes } from '@/views/main/constant'
  137. import { objectToOptions } from '@/utils'
  138. import { createRandom } from '@/helpers/uuidv4'
  139. import { inspectionAdd, inspectionGetInfo, inspectionUpdate } from '@/views/main/api'
  140. const emptyMatter = {
  141. item: '',
  142. times: ''
  143. }
  144. export default {
  145. props: ['id'],
  146. data() {
  147. return {
  148. form: {
  149. organId: '',
  150. group: [{
  151. _uuid: createRandom(),
  152. userId: '',
  153. matter: [{...emptyMatter}]
  154. }]
  155. },
  156. technicians: []
  157. }
  158. },
  159. computed: {
  160. matterTypesOptions() {
  161. return objectToOptions(matterTypes)
  162. },
  163. isCreate() {
  164. return !this.id
  165. },
  166. },
  167. watch: {
  168. async 'form.organId'() {
  169. if (this.form.organId) {
  170. try {
  171. const res = await queryEmployByOrganId({
  172. organId: this.form.organId,
  173. rows: 999
  174. })
  175. this.technicians = res.data.rows
  176. console.log(this.form.group.map(item => ({...item, userId: ''})))
  177. this.$set(this.form, 'group', this.form.group.map(item => ({...item, userId: ''})))
  178. } catch (error) {}
  179. }
  180. }
  181. },
  182. async mounted() {
  183. try {
  184. const res = await inspectionGetInfo({
  185. id: this.id
  186. })
  187. this.form = {
  188. ...this.form,
  189. organId: res.data.organId,
  190. month: res.data.month,
  191. group: [{
  192. _uuid: createRandom(),
  193. userId: res.data.userId,
  194. matter: res.data.inspectionItems.map(item => ({item: item.item, times: item.times}))
  195. }]
  196. }
  197. } catch (error) {}
  198. },
  199. methods: {
  200. createGroup() {
  201. this.form.group.push({
  202. userId: '',
  203. matter: [{...emptyMatter}]
  204. })
  205. },
  206. createMatter(matter) {
  207. matter.push({...emptyMatter})
  208. },
  209. removeMatter(matter, index) {
  210. matter.splice(index, 1)
  211. },
  212. async removeGroup(group, index) {
  213. try {
  214. await this.$confirm('是否确认删除此乐团主管?', '提示', {
  215. type: 'warning'
  216. })
  217. group.splice(index, 1)
  218. } catch (error) {}
  219. },
  220. async submit() {
  221. try {
  222. this.$refs.form.validate(async valid => {
  223. if (valid) {
  224. const data = this.form.group.map(item => ({
  225. organId: this.form.organId,
  226. month: this.form.month,
  227. userId: item.userId,
  228. inspectionItems: item.matter.map(m => ({
  229. ...m,
  230. organId: this.form.organId,
  231. month: this.form.month,
  232. }))
  233. }))
  234. if (this.isCreate) {
  235. await inspectionAdd(data)
  236. this.$message.success('创建成功')
  237. } else {
  238. await inspectionUpdate({
  239. ...data[0],
  240. id: this.id,
  241. })
  242. this.$message.success('修改成功')
  243. }
  244. this.$emit('close')
  245. this.$emit('submited')
  246. }
  247. })
  248. } catch (error) {}
  249. }
  250. }
  251. }
  252. </script>
  253. <style lang="less" scoped>
  254. .group{
  255. background-color: rgba(0, 0, 0, 0.05);
  256. padding: 10px;
  257. border-radius: 3px;
  258. margin-bottom: 10px;
  259. }
  260. .ctrl{
  261. margin-top: 45px;
  262. display: flex;
  263. justify-content: space-between;
  264. i{
  265. font-size: 24px;
  266. }
  267. }
  268. </style>