fromDrawer.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <hc-drawer v-model="isShow" to-id="node-card-plan" is-close>
  3. <hc-card>
  4. <template #header>
  5. <el-link type="primary" @click="goBack">返回</el-link>
  6. </template>
  7. <template #extra>
  8. <HcTooltip keys="system-service-plan-save-btn">
  9. <el-button
  10. class="ml-6"
  11. hc-btn
  12. keys="system-service-plan-save-btn"
  13. type="primary"
  14. :loading="saveLoading"
  15. @click="savePlan"
  16. >
  17. <HcIcon name="save" />
  18. 保存数据
  19. </el-button>
  20. </HcTooltip>
  21. <HcTooltip keys="system-service-plan-preview-btn">
  22. <el-button
  23. class="node-card-plan-btn ml-6"
  24. hc-btn
  25. keys="system-service-plan-preview-btn"
  26. color="#3F9EFF"
  27. >
  28. <HcIcon name="eye" />
  29. 预览
  30. </el-button>
  31. </HcTooltip>
  32. <HcTooltip keys="system-service-plan-send-btn">
  33. <el-button
  34. class="node-card-plan-btn ml-6"
  35. hc-btn
  36. keys="system-service-plan-send-btn"
  37. type="warning"
  38. @click="sendPlan"
  39. >
  40. <HcIcon name="send-plane" />
  41. 发送计划
  42. </el-button>
  43. </HcTooltip>
  44. <HcTooltip keys="system-service-plan-back-btn">
  45. <el-button
  46. class="node-card-plan-btn ml-6"
  47. hc-btn
  48. keys="system-service-plan-back-btn"
  49. type="warning"
  50. >
  51. <HcIcon name="arrow-go-back" />
  52. 计划回退
  53. </el-button>
  54. </HcTooltip>
  55. <HcTooltip keys="system-service-plan-comfirm-btn">
  56. <el-button
  57. class="node-card-plan-btn ml-6"
  58. hc-btn
  59. keys="system-service-plan-comfirm-btn"
  60. type="success"
  61. >
  62. <HcIcon name="check" />
  63. 确认计划
  64. </el-button>
  65. </HcTooltip>
  66. </template>
  67. <div class="hc-table-form-box">
  68. <HcTableForm
  69. ref="tableFormRef"
  70. :form="tableFormData"
  71. :html="excelHtmlData"
  72. :loading="loading"
  73. :pkey="excelIdVal"
  74. :disabled="!isTableForm"
  75. @render="tableFormRender"
  76. />
  77. </div>
  78. </hc-card>
  79. <!-- 选择任务人 -->
  80. <HcUserModal v-model="isUserModalShow" :data="userData" :datas="dataInfo" @finish="fixedUserFinish" />
  81. </hc-drawer>
  82. </template>
  83. <script setup>
  84. import { ref, watch } from 'vue'
  85. import { arrToKey, deepClone, isString } from 'js-fast-way'
  86. import HcUserModal from './hc-tasks-user/user-modal.vue'
  87. import { useAppStore } from '~src/store'
  88. import dataApi from '~api/systemService/service'
  89. //参数
  90. const props = defineProps({
  91. type: {
  92. type:[String, Number],
  93. default:'',
  94. },
  95. })
  96. const type = ref(props.type)
  97. const isShow = defineModel('modelValue', {
  98. default: false,
  99. })
  100. const tableFormRef = ref(null)
  101. const tableFormData = ref({})
  102. const excelHtmlData = ref('')
  103. const loading = ref(false)
  104. const excelIdVal = ref('')
  105. const isTableForm = ref(false)
  106. const useAppState = useAppStore()
  107. const projectId = ref(useAppState.getProjectId)
  108. const contractId = ref(useAppState.getContractId)
  109. watch(isShow, (val) => {
  110. })
  111. //监听
  112. watch(() => [
  113. props.type,
  114. ], ([val]) => {
  115. type.value = val
  116. if (val === 1) {
  117. excelIdVal.value = '1937773223861026820'
  118. } else {
  119. excelIdVal.value = '1937773223861026822'
  120. }
  121. if (val) getExcelHtml()
  122. })
  123. //获取模板标签数据
  124. const getExcelHtml = async () => {
  125. loading.value = true
  126. //获取数据
  127. const { error, code, data } = await dataApi.getServiceHtml({
  128. contractId: contractId.value || '',
  129. pkeyId: excelIdVal.value,
  130. projectId: projectId.value || '',
  131. }, false)
  132. loading.value = false
  133. //处理数据
  134. const resData = isString(data) ? data || '' : ''
  135. if (!error && code === 200 && resData) {
  136. excelHtmlData.value = resData
  137. } else {
  138. excelHtmlData.value = ''
  139. isTableForm.value = false
  140. }
  141. }
  142. //渲染表单完成
  143. const tableFormRender = (form) => {
  144. isTableForm.value = form.isRenderForm
  145. }
  146. const goBack = () => {
  147. isShow.value = false
  148. }
  149. const sendPlan = ()=>{
  150. isUserModalShow.value = true
  151. }
  152. const isUserModalShow = ref(false)
  153. const userData = ref([])
  154. const dataInfo = ref({
  155. projectId:projectId.value,
  156. contractId:contractId.value,
  157. })
  158. const fixedUserFinish = (data) => {
  159. const res = deepClone(data)
  160. console.log(res, 'res')
  161. userData.value = res
  162. const userIds = arrToKey(res, 'userId', ',')
  163. let userIdsArr = userIds.split(',')
  164. }
  165. //保存数据
  166. const saveLoading = ref(false)
  167. const savePlan = async ()=>{
  168. console.log( tableFormData.value, 'tableFormData.value')
  169. let objres = {
  170. ...tableFormData.value,
  171. projectId: projectId.value,
  172. contractId: contractId.value,
  173. pkeyId: excelIdVal.value,
  174. }
  175. saveLoading.value = true
  176. const { error, code, msg, data } = await dataApi.saveServiceData({
  177. dataInfo: objres,
  178. }, false)
  179. saveLoading.value = false
  180. if (!error && code === 200) {
  181. window?.$message?.success(msg)
  182. } else {
  183. saveLoading.value = false
  184. }
  185. }
  186. </script>
  187. <style scoped lang="scss">
  188. .node-card-plan-btn{
  189. color:white;
  190. }
  191. .hc-table-form-box{
  192. height: 100%;
  193. overflow-y: auto;
  194. overflow-x: auto;
  195. }
  196. </style>