index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. <!--
  2. *@description: 节点信息form(新)
  3. *@author: yh Fu
  4. *@date: 2024-01-10 14:44:14
  5. *@version: V1.0.5
  6. -->
  7. <template>
  8. <div style="width: 100%; height: 100%;">
  9. <!-- 节点表单 -->
  10. <el-form ref="fangxianForm" :model="nodeInfo" :rules="nodeRules" label-width="200px">
  11. <h2 style="margin-left: 16%;font-weight: 800;">{{ name }}</h2>
  12. <el-form-item label="施工时间" prop="constructTime" v-show="currentContain.includes('constructTime')">
  13. <el-date-picker
  14. :disabled="formType"
  15. v-model="nodeInfo.constructTime"
  16. value-format="yyyy-MM-dd hh:mm:ss"
  17. type="datetime"
  18. placeholder="请选择施工时间">
  19. </el-date-picker>
  20. </el-form-item>
  21. <el-form-item label="回填时间" prop="backfillTime" v-if="currentContain.includes('backfillTime')">
  22. <el-date-picker
  23. :disabled="formType"
  24. v-model="nodeInfo.backfillTime"
  25. value-format="yyyy-MM-dd hh:mm:ss"
  26. type="datetime"
  27. placeholder="请选择回填日期">
  28. </el-date-picker>
  29. </el-form-item>
  30. <el-form-item label="是否按图纸施工" prop="constructAccordingDrawings" v-if="currentContain.includes('constructAccordingDrawings')">
  31. <el-select v-model="nodeInfo.constructAccordingDrawings" :disabled="formType">
  32. <el-option
  33. v-for="e in constructAccordingDrawingsOption"
  34. :key="e.value"
  35. :label="e.label"
  36. :value="e.value"
  37. ></el-option>
  38. </el-select>
  39. </el-form-item>
  40. <el-form-item label="分段打压" prop="segmentedCompressionQualified" v-if="currentContain.includes('segmentedCompressionQualified')">
  41. <el-select v-model="nodeInfo.segmentedCompressionQualified" :disabled="formType">
  42. <el-option
  43. v-for="e in segmentedCompressionQualifiedOption"
  44. :key="e.value"
  45. :label="e.label"
  46. :value="e.value"
  47. ></el-option>
  48. </el-select>
  49. </el-form-item>
  50. <el-form-item label="照片" prop="zEngiineeringPhotoBoList" class="obsImage" v-if="currentContain.includes('zEngiineeringPhotoBoList')">
  51. <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="nodeInfo.zEngiineeringPhotoBoList"
  52. @input="getUrl"></ObsImageUpload>
  53. </el-form-item>
  54. <el-form-item label="备注" prop="remark" v-if="currentContain.includes('remark')">
  55. <el-input
  56. v-model="nodeInfo.remark"
  57. type="textarea"
  58. placeholder="请输入内容"
  59. maxlength="255"
  60. />
  61. </el-form-item>
  62. <el-row v-for="(item, index) in zEngineeringMaterialBo" :key="index" style="left: 13%;">
  63. <!-- 在此处添加默认的行内容 -->
  64. <template v-if="index === null">
  65. <div>默认的行内容</div>
  66. </template>
  67. <!-- 循环输出的行内容 -->
  68. <el-col :span="7" v-show="materialComponList.includes('materialQuality')">
  69. <el-form-item
  70. :prop="'zEngineeringMaterialBo.' + index + '.materialQuality'"
  71. label-width="50px"
  72. label="材质"
  73. >
  74. <!-- :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
  75. <!-- <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
  76. <el-select v-model="item.materialQuality" placeholder="请选择材质" style="width: 100%" @change="getEnginSpecificationsList(item, index)">
  77. <el-option
  78. v-for="e in materialQualityList"
  79. :key="e.id"
  80. :label="e.name"
  81. :value="e.id"
  82. ></el-option>
  83. </el-select>
  84. </el-form-item>
  85. </el-col>
  86. <el-col :span="7" v-show="materialComponList.includes('specifications')">
  87. <el-form-item
  88. :prop="'zEngineeringMaterialBo.' + index + '.specifications'"
  89. label-width="50px"
  90. label="规格"
  91. >
  92. <!-- :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
  93. <!-- <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
  94. <el-select v-model="status == '修改' ? item.specificationsName : item.specifications" placeholder="请选择规格" style="width: 100%">
  95. <el-option
  96. v-for="e in specificationsList"
  97. :key="e.id"
  98. :label="e.name"
  99. :value="e.id"
  100. ></el-option>
  101. </el-select>
  102. </el-form-item>
  103. </el-col>
  104. <el-col :span="7" v-show="materialComponList.includes('number')">
  105. <el-form-item
  106. :prop="'zEngineeringMaterialBo.' + index + '.number'"
  107. label-width="50px"
  108. label="数量"
  109. >
  110. <!-- :rules="[{required: true, message: '请输入数量', trigger: 'change'},{validator: [checkPositiveInteger], trigger: 'blur'}]"-->
  111. <div class="block" style="display: inline-block; margin-right: 20px;">
  112. <el-input v-model="item.number" placeholder="请输入数量" style="width: 100%" maxlength="8" type="number"/>
  113. </div>
  114. </el-form-item>
  115. </el-col>
  116. <el-col :span="7" v-show="materialComponList.includes('remark')">
  117. <el-form-item
  118. :prop="'zEngineeringMaterialBo.' + index + '.remark'"
  119. label="描述"
  120. label-width="50px"
  121. class="material_desc"
  122. >
  123. <!-- :rules="[{required: true, message: '请输入数量', trigger: 'change'},{validator: [checkPositiveInteger], trigger: 'blur'}]"-->
  124. <div class="block" style="display: inline-block; margin-right: 20px;">
  125. <el-input v-model="item.remark" placeholder="请填写描述" style="width: 200px;" maxlength="255" type="textarea"/>
  126. </div>
  127. </el-form-item>
  128. </el-col>
  129. <el-col :span="7" v-show="materialComponList.includes('brand')">
  130. <el-form-item
  131. :prop="'zEngineeringMaterialBo.' + index + '.brand'"
  132. label-width="50px"
  133. label="品牌"
  134. >
  135. <!-- :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
  136. <!-- <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
  137. <el-select v-model="item.brand" placeholder="请选择品牌" style="width: 100%">
  138. <el-option
  139. v-for="e in specificationsList"
  140. :key="e.id"
  141. :label="e.name"
  142. :value="e.id"
  143. ></el-option>
  144. </el-select>
  145. </el-form-item>
  146. </el-col>
  147. <el-col :span="7" v-show="materialComponList.includes('corrosionLevel')">
  148. <el-form-item
  149. :prop="'zEngineeringMaterialBo.' + index + '.corrosionLevel'"
  150. label-width="150px"
  151. label="腐蚀等级"
  152. >
  153. <!-- :rules="{required: true, message: '请输入规格', trigger: 'blur'}"-->
  154. <!-- <el-input v-model="item.specifications" placeholder="请输入规格" style="width: 100%"/>-->
  155. <el-select v-model="item.corrosionLevel" placeholder="请选择腐蚀等级" style="width: 100%">
  156. <el-option
  157. v-for="e in corrosionLevelList"
  158. :key="e.dictValue"
  159. :label="e.dictLabel"
  160. :value="e.dictValue"
  161. ></el-option>
  162. </el-select>
  163. </el-form-item>
  164. </el-col>
  165. <el-col :span="7" v-show="materialComponList.includes('visitType')">
  166. <el-form-item label="上门类型" :prop="'zEngineeringMaterialBo.' + index + '.visitType'">
  167. <el-select v-model="item.visitType">
  168. <el-option
  169. v-for="e in dict.type.visit_type"
  170. :key="e.value"
  171. :label="e.label"
  172. :value="e.value"
  173. ></el-option>
  174. </el-select>
  175. </el-form-item>
  176. </el-col>
  177. <el-col :span="7" v-show="materialComponList.includes('selfClosingValveType')">
  178. <el-form-item label="自闭阀类型" :prop="'zEngineeringMaterialBo.' + index + '.selfClosingValveType'">
  179. <el-select v-model="item.selfClosingValveType">
  180. <el-option
  181. v-for="e in dict.type.self_closing_valve_type"
  182. :key="e.value"
  183. :label="e.label"
  184. :value="e.value"
  185. ></el-option>
  186. </el-select>
  187. </el-form-item>
  188. </el-col>
  189. <el-col :span="3" v-if="enginType != '民用工程'" style="position: absolute;right: 0;">
  190. <el-form-item style="margin-left: -197px;">
  191. <el-button v-if="zEngineeringMaterialBo.length > 0" @click="removezEngineeringMaterialBo(index)">
  192. 删除
  193. </el-button>
  194. </el-form-item>
  195. </el-col>
  196. </el-row>
  197. <div style="width: 25%; float: right" v-if="enginType != '民用工程'">
  198. <!-- <el-button @click="addzEngineeringMaterialBo('nodeInfo',['materialQuality','specifications','number'])">新增用料信息</el-button> -->
  199. <el-button @click="addMaterial()">新增用料信息</el-button>
  200. <!-- <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
  201. <el-button @click="nodeCancel">取 消</el-button> -->
  202. </div>
  203. </el-form>
  204. </div>
  205. </template>
  206. <script>
  207. import {
  208. getEnginMaterialQualityList, // 材质
  209. getEnginSpecificationsList, // 规格
  210. getDictType, // 腐蚀程度
  211. } from '@/api/zdsz/enginee'
  212. export default {
  213. name:'EnginNodeInfo',
  214. props:['types','enginType','name','currentContain','updateOption','status'],
  215. dicts:[
  216. 'visit_type',
  217. 'self_closing_valve_type',
  218. ],
  219. data(){
  220. return {
  221. constructAccordingDrawingsOption:[
  222. {
  223. value:'Y',
  224. label:'是'
  225. },
  226. {
  227. value:'N',
  228. label:'否'
  229. }
  230. ],
  231. segmentedCompressionQualifiedOption:[
  232. {
  233. value:'1',
  234. label:'合格'
  235. },
  236. {
  237. value:'0',
  238. label:'不合格'
  239. }
  240. ],
  241. corrosionLevelList:[], // 腐蚀等级option
  242. materialQualityList:[], // 材质
  243. specificationsList:[], // 规格
  244. materialComponList:[],
  245. nodeInfo:{
  246. backfillTime:'', // 回填时间
  247. constructTime:'',
  248. constructAccordingDrawings:'',
  249. segmentedCompressionQualified:'',
  250. zEngiineeringPhotoBoList:[], // 照片集合
  251. zEngineeringMaterialBo:[], // 用料集合
  252. remark:'',
  253. },
  254. nodeInfoBo:{
  255. zEngineeringInfoBo:{
  256. }
  257. }, // 节点信息
  258. zEngineeringMaterialBo:[
  259. ], // 用料信息
  260. }
  261. },
  262. created(){
  263. // 获取材质
  264. getEnginMaterialQualityList({enginType:this.enginType}).then(res => {
  265. console.log('材质',res)
  266. this.materialQualityList = res.data
  267. })
  268. // 获取腐蚀等级
  269. getDictType({dictType:'corrosion_level'}).then(res => {
  270. console.log('腐蚀等级',res)
  271. this.corrosionLevelList = res.data
  272. })
  273. console.log('update',this.updateOption)
  274. },
  275. mounted(){
  276. console.log('当前节点name',this.name)
  277. console.log('update',this.updateOption)
  278. console.log('当前节点currentContain',this.currentContain)
  279. this.materialComponList = this.currentContain.find(e => {
  280. if( e instanceof Array){
  281. return e
  282. }
  283. })
  284. if(this.status == '修改'){
  285. this.currentContain.find(e => {
  286. console.log(this.updateOption)
  287. if( e instanceof Array){
  288. this.zEngineeringMaterialBo = this.updateOption.zEngineeringInfoBoList[0].zEngineeringMaterialBo
  289. }
  290. this.nodeInfo[e] = this.updateOption[e]
  291. })
  292. this.nodeInfo.zEngiineeringPhotoBoList = this.updateOption.zEngineeringInfoBoList[0].zEngiineeringPhotoBoList
  293. }
  294. setTimeout(() => {
  295. // 至少存在一条物料
  296. this.addMaterial()
  297. },1500)
  298. console.log('用料组件',this.materialComponList)
  299. console.log('用料信息',this.zEngineeringMaterialBo)
  300. console.log('节点信息',this.nodeInfo)
  301. // 添加用料对象
  302. // this.addMaterial()
  303. },
  304. methods:{
  305. // 收集节点信息
  306. infoCollection(){
  307. // 收集主节点信息
  308. this.currentContain.forEach(e => {
  309. if( e instanceof Array){
  310. // 包含用料 特殊处理
  311. return
  312. }
  313. this.nodeInfoBo[e] = this.nodeInfo[e]
  314. })
  315. this.nodeInfoBo.type = this.name
  316. // 接口数据格式修改 图片和用料放到nodeInfoBo节点详情对象中
  317. this.nodeInfoBo.zEngineeringInfoBo.zEngiineeringPhotoBoList = this.nodeInfo.zEngiineeringPhotoBoList
  318. this.nodeInfoBo.zEngineeringInfoBo.zEngineeringMaterialBo = this.zEngineeringMaterialBo
  319. delete this.nodeInfo.zEngiineeringPhotoBoList
  320. console.log('即将返回的节点Info',this.nodeInfoBo)
  321. return this.nodeInfoBo
  322. },
  323. addMaterial(){
  324. let materialBo = {}
  325. console.log(this.materialComponList)
  326. this.materialComponList.forEach(e => {
  327. materialBo[e] = null
  328. })
  329. this.zEngineeringMaterialBo.push(materialBo)
  330. // console.log('节点用料参数对象',this.zEngineeringMaterialBo)
  331. },
  332. addzEngineeringMaterialBo(option,params){
  333. let material = {}
  334. params.forEach(e => {
  335. material[e] = ""
  336. })
  337. this[option].zEngineeringMaterialBo.push(
  338. material
  339. )
  340. },
  341. // 填充已有数据
  342. updateInfo(e){
  343. console.log('填充',e)
  344. },
  345. getUrl(url) {
  346. this.nodeInfo.zEngiineeringPhotoBoList = this.$refs.obsImageUpload.fileList ? this.$refs.obsImageUpload.fileList.map(e=>e.url):[];
  347. },
  348. // 获取材质规格
  349. getEnginSpecificationsList(e,idx){
  350. getEnginSpecificationsList({materId:e.materialQuality}).then(res => {
  351. console.log('规格',res.data)
  352. this.specificationsList = res.data
  353. })
  354. },
  355. }
  356. }
  357. </script>
  358. <style lang="scss" scoped>
  359. ::v-deep .material_desc{
  360. .el-form-item__content{
  361. margin-left: 50px !important;
  362. }
  363. }
  364. ::v-deep .el-form{
  365. position: relative;
  366. left: -10%;
  367. .el-form-item{
  368. display: inline-block;
  369. }
  370. .obsImage{
  371. width: 100%;
  372. display: block;
  373. margin-left: 8%;
  374. .el-form-item__label{
  375. width: 113px !important;
  376. }
  377. }
  378. }
  379. </style>