addBuild.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <template>
  2. <el-dialog
  3. :title="buildTitle"
  4. :visible.sync="buildDialogVis"
  5. id="messageDialog"
  6. width="850px"
  7. >
  8. <el-form
  9. :inline="true"
  10. :model="form"
  11. label-width="160px"
  12. :label-position="'right'"
  13. :rules="rules"
  14. ref="ruleForm"
  15. >
  16. <template v-for="(val,key) in buildMessage">
  17. <h4>{{key}}</h4>
  18. <div
  19. :key="item.InfoPointCode"
  20. v-for="item in val"
  21. :class="[{'upload-file':item.InputMode == 'F2' || item.Path === 'BuildingInfo.BuildingType.Pic'}]"
  22. style="width: 50%;display: inline-block"
  23. >
  24. <el-form-item
  25. :class="{FloorTypeSelect:item.InputMode == 'D1'||item.Unit}"
  26. :label="item.InfoPointName"
  27. :prop="item.InfoPointCode"
  28. v-if="all||item.Visible"
  29. >
  30. <el-input
  31. v-model="form[item.Path]"
  32. v-if="item.InputMode == 'B1' || item.InputMode == 'B2'"
  33. />
  34. <el-input type="number" v-else-if="item.InputMode == 'A1'||item.InputMode == 'A2'"
  35. v-model="form[item.Path]">
  36. <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
  37. </el-input>
  38. <el-select
  39. placeholder="请选择"
  40. v-else-if="item.InputMode == 'D1' || item.InputMode == 'E2'"
  41. v-model="form[item.Path]"
  42. >
  43. <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
  44. </el-select>
  45. <el-select
  46. placeholder="请选择"
  47. v-else-if="item.InputMode == 'D2'"
  48. v-model="form[item.Path]"
  49. multiple
  50. collapse-tags
  51. >
  52. <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
  53. </el-select>
  54. <el-date-picker
  55. v-model="form[item.Path]"
  56. type="daterange"
  57. v-else-if="item.InputMode == 'C6'"
  58. value-format="yyyy-MM-dd"
  59. range-separator="至"
  60. start-placeholder="开始日期"
  61. end-placeholder="结束日期"
  62. />
  63. <el-cascader
  64. v-else-if="item.InputMode == 'D1L'"
  65. placeholder="请选择"
  66. :options="item.options"
  67. v-model="form[item.Path]"
  68. :props="item.props"
  69. filterable
  70. :show-all-levels="false"
  71. clearable
  72. style="width: 200px"
  73. />
  74. <el-input
  75. v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'"
  76. v-model="form[item.Path]">
  77. <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
  78. </el-input>
  79. <el-date-picker
  80. placeholder="选择日期"
  81. value-format="yyyy-MM-dd"
  82. type="date" v-else-if="item.InputMode == 'C5'" v-model="form[item.Path]">
  83. </el-date-picker>
  84. <uploadImgs
  85. :readOnly="false"
  86. v-else-if="item.InputMode == 'F2'&& item.Path === 'BuildingInfo.BuildingType.Pic'"
  87. v-model="form[item.Path]"
  88. :keysArr="Array.isArray(buildData[item.Path]) ? buildData[item.Path]:[]"
  89. :context-key="item.Path"
  90. :isShow="1"
  91. @change="changeItem"
  92. />
  93. <upload-files
  94. v-model="form[item.Path]"
  95. v-else-if="item.InputMode == 'F2'"
  96. :readOnly="false"
  97. :isShow="1"
  98. :keys-arr="Array.isArray(buildData[item.Path]) ? buildData[item.Path]:[] "
  99. :show-file-list="false"
  100. :context-key="item.Path"
  101. @change="changeItem"
  102. />
  103. <el-input disabled title="暂不支持" v-else v-model="form[item.Path]"/>
  104. </el-form-item>
  105. </div>
  106. </template>
  107. </el-form>
  108. <span
  109. class="dialog-footer"
  110. slot="footer">
  111. <el-button @click="buildDialogVis = false">取 消</el-button>
  112. <el-button @click="submitForm('ruleForm')" type="primary" :disabled="buildDisabled">确 定</el-button>
  113. </span>
  114. <el-dialog :visible.sync="dialogVisible">
  115. <img width="100%" :src="dialogImageUrl" alt="">
  116. </el-dialog>
  117. </el-dialog>
  118. </template>
  119. <script>
  120. import uploadFiles from "@/components/business_space/lib/uploadFiles";
  121. import uploadImgs from "@/components/business_space/lib/uploadImgsName";
  122. function flattenKeys(obj) {
  123. let res = {}
  124. function isObject(val) {
  125. return typeof val === 'object' && !Array.isArray(val)
  126. }
  127. function digKeys(prev, obj) {
  128. Object.entries(obj).forEach(([key, value]) => {
  129. const currentKey = prev ? `${prev}.${key}` : key
  130. if (isObject(value)) {
  131. digKeys(currentKey, value)
  132. } else {
  133. res[currentKey] = value
  134. }
  135. })
  136. }
  137. digKeys('', obj)
  138. return res
  139. }
  140. export default {
  141. data() {
  142. return {
  143. buildName: '',
  144. keysArr: [], //保存临时的文件key
  145. buildDialogVis: false,
  146. form: {},
  147. dialogImageUrl: '',
  148. dialogVisible: false,
  149. all: true,
  150. rules: {
  151. "BuildLocalID": [
  152. {"required": true, "message": "请输入建筑本地编码", "trigger": "blur"}
  153. ],
  154. "BuildLocalName": [
  155. {"required": true, "message": "请输入建筑本地名称", "trigger": "blur"}
  156. ]
  157. },
  158. buildData: {},
  159. buildDisabled: false,
  160. }
  161. },
  162. components: {uploadFiles, uploadImgs},
  163. props: ['buildTitle', 'buildMessage', 'currentBuild'],
  164. computed: {},
  165. mounted() {
  166. },
  167. watch: {},
  168. methods: {
  169. deepCopy(obj) {
  170. return JSON.parse(JSON.stringify(obj))
  171. },
  172. showDialog(data) {
  173. //获取信息
  174. let buildData = data || {}; // string =>array key
  175. buildData = flattenKeys(buildData);
  176. for (let key in this.buildMessage) {
  177. let arr = this.buildMessage[key];
  178. if (Array.isArray(arr)) {
  179. let list = arr.filter(i => i.InputMode == 'D2' || i.InputMode == 'C6');
  180. list.forEach(j => {
  181. if (buildData.hasOwnProperty(j.Path)) {
  182. if (!Array.isArray(buildData[j.Path])) {
  183. buildData[j.Path] = buildData[j.Path].split(',');
  184. }
  185. }
  186. })
  187. }
  188. }
  189. this.buildData = buildData;
  190. this.timeoutSetVal()
  191. this.buildDialogVis = true
  192. },
  193. timeoutSetVal() {
  194. let that = this
  195. setTimeout(() => {
  196. if (that.form) {
  197. that.form = that.buildData
  198. } else {
  199. this.timeoutSetVal()
  200. }
  201. })
  202. },
  203. closeDialog() {
  204. this.buildDialogVis = false
  205. },
  206. submitForm(formName) {
  207. this.$refs[formName].validate((valid) => {
  208. if (valid) {
  209. this.buildDisabled = true
  210. for (let key in this.buildMessage) {
  211. let arr = this.buildMessage[key];
  212. if (Array.isArray(arr)) {
  213. let list = arr.filter(i => i.InputMode == 'D2' || i.InputMode == 'C6');
  214. list.forEach(j => {
  215. if (this.form.hasOwnProperty(j.Path)) {
  216. if (Array.isArray(this.form[j.Path])) {
  217. this.form[j.Path] = this.form[j.Path].join(',');
  218. }
  219. }
  220. })
  221. }
  222. }
  223. this.$emit('handleBuild', this.form)
  224. setTimeout(() => {
  225. this.buildDisabled = false
  226. }, 2500)
  227. } else {
  228. return false;
  229. }
  230. });
  231. },
  232. changeItem(val) {
  233. console.log(val)
  234. let _key = Object.keys(val)[0] + '';
  235. this.form[_key] = val[_key];
  236. },
  237. }
  238. }
  239. </script>
  240. <style lang="less" scoped>
  241. #messageDialog {
  242. /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner, /deep/ .el-select {
  243. width: 200px;
  244. }
  245. /deep/ .FloorTypeSelect .el-form-item__content {
  246. width: 200px;
  247. }
  248. /deep/ .el-dialog__body {
  249. height: 420px;
  250. overflow: auto;
  251. }
  252. .upload-file {
  253. width: 100% !important;
  254. display: block !important;
  255. }
  256. /deep/ .el-input--small {
  257. width: 200px
  258. }
  259. }
  260. </style>