addForm.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <div class='add-form'>
  3. <div class='form1'>
  4. <span class='span1'>图例编码</span>
  5. <span class='span2'>图例名称</span>
  6. <span class='span3' v-if='ruleForm.Type==1 || ruleForm.Type==3'>展示预览</span>
  7. </div>
  8. <div class='form2'>
  9. <div class='input-left'>
  10. <el-input v-model='ruleForm.Code' disabled style='width:200px;height:32px;margin-right:48px;'></el-input>
  11. <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input>
  12. <div class='title'>单位</div>
  13. <div class='type'>图例类型</div>
  14. <el-input v-model='ruleForm.unit' style='width:200px;height:32px;'></el-input>
  15. <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px;margin-left:46px'>
  16. <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
  17. </el-select>
  18. </div>
  19. <div class='input-right' v-if='ruleForm.Type==1 || ruleForm.Type==3'>
  20. <div
  21. class='model'
  22. :style='`background:${ruleForm.color};border-width:${ruleForm.borderLine}px;border-style:${ruleForm.borderColor}; border-color:${ruleForm.borderColor};`'
  23. ></div>
  24. </div>
  25. </div>
  26. <div v-if='ruleForm.Type==1 || ruleForm.Type==4' class='form3'>
  27. <div class='form3-top'>
  28. <span class='form3-span1' v-if='ruleForm.Type==1'>填充色以及透明度</span>
  29. <span class='form3-span3'>边框颜色</span>
  30. <span class='form3-span4'>边框线型</span>
  31. <span class='form3-span5'>边框粗细</span>
  32. </div>
  33. <div class='form3-bottom'>
  34. <el-color-picker v-if='ruleForm.Type==1' v-model='ruleForm.color' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
  35. <el-color-picker v-model='ruleForm.borderColor' show-alpha style='margin:0 90px 0 10px'></el-color-picker>
  36. <el-select
  37. v-model='ruleForm.borderLine'
  38. placeholder='请选择'
  39. size='small'
  40. style='width:160px;margin-right:24px'
  41. ref='select1'
  42. @change='changeSelection1'
  43. >
  44. <el-option v-for='item in borderLineOption' :key='item.id' :label='item.src' :value='item.id'>
  45. <img :src='item.src' alt />
  46. </el-option>
  47. </el-select>
  48. <el-select v-model='ruleForm.linepx' placeholder='请选择' size='small' style='width:160px;' ref='select' @change='changeSelection'>
  49. <el-option v-for='item in linepxOption' :key='item.id' :label='item.src' :value='item.id'>
  50. <img :src='item.src' alt />
  51. </el-option>
  52. </el-select>
  53. </div>
  54. </div>
  55. <div v-if='ruleForm.Type==3' class='form5'>
  56. <div class='form5-top'>上传新图标</div>
  57. <div>
  58. <el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' :http-request='getFile' :file-list='fileList'>
  59. <el-button size='small' style='color:#1F2329;'>点击上传</el-button>
  60. </el-upload>
  61. </div>
  62. </div>
  63. <div v-if='ruleForm.Type!=2' class='form4'>
  64. <div class='form4-top'>
  65. <span class='form4-span1'>对应工程信息化中的位置/设备分类</span>
  66. <span class='form4-span2'>工程信息化的专业</span>
  67. <span class='form4-span3'>铺位可视化typeid</span>
  68. </div>
  69. <div class='form3-bottom'>
  70. <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px;'>
  71. <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
  72. </el-select>
  73. <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px'>
  74. <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
  75. </el-select>
  76. <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;'>
  77. <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
  78. </el-select>
  79. </div>
  80. </div>
  81. </div>
  82. </template>
  83. <script>
  84. import { createLegend, updateLegend, uploadImg } from '@/api/legendLibrary.js'
  85. export default {
  86. data() {
  87. return {
  88. // ruleForm: {
  89. // color: 'rgba(19, 206, 102, 0.8)',
  90. // borderColor: 'rgba(19, 206, 102, 0.8)',
  91. // borderLine: '',
  92. // linepx: '',
  93. // Code: '',
  94. // Name: '',
  95. // Type: '2',
  96. // unit: ''
  97. // },
  98. options: [
  99. {
  100. value: '2',
  101. label: '非图例'
  102. },
  103. {
  104. value: '1',
  105. label: '区域'
  106. },
  107. {
  108. value: '3',
  109. label: '图标'
  110. },
  111. {
  112. value: 4,
  113. label: '线条'
  114. }
  115. ],
  116. borderLineOption: [
  117. {
  118. id: 'solid',
  119. src: require('@/assets/imgs/1pxline.jpg')
  120. },
  121. {
  122. id: 'dashed',
  123. src: require('@/assets/imgs/dashedLine.jpg')
  124. },
  125. {
  126. id: 'dotted',
  127. src: require('@/assets/imgs/dotLine.jpg')
  128. }
  129. ],
  130. linepxOption: [
  131. {
  132. id: '1',
  133. src: require('@/assets/imgs/1pxline.jpg')
  134. },
  135. {
  136. id: '2',
  137. src: require('@/assets/imgs/2pxline.jpg')
  138. },
  139. {
  140. id: '3',
  141. src: require('@/assets/imgs/3pxline.jpg')
  142. }
  143. ],
  144. fileList: [],
  145. imgSrc: '', //图标的key,/serve/Picture/query/${imgSrc}
  146. value: ''
  147. }
  148. },
  149. props: ['ruleForm'],
  150. methods: {
  151. getFile(file) {
  152. console.log(file)
  153. var formData = new FormData()
  154. formData.append('file', file.file)
  155. let postParams = formData
  156. uploadImg({ postParams }).then(res => {
  157. if (res.Result == 'success') {
  158. this.imgSrc = res.EntityList[0]
  159. this.$message.success('图标上传成功!')
  160. }
  161. })
  162. },
  163. changeSelection() {
  164. console.log(this.ruleForm.linepx)
  165. let path = this.$refs.select.selectedLabel
  166. this.$refs.select.$el.children[0].children[0].setAttribute(
  167. 'style',
  168. 'background:url(' + path + ') center center no-repeat;color:transparent;'
  169. )
  170. },
  171. changeSelection1() {
  172. console.log(this.ruleForm.borderLine)
  173. let path = this.$refs.select1.selectedLabel
  174. this.$refs.select1.$el.children[0].children[0].setAttribute(
  175. 'style',
  176. 'background:url(' + path + ') center center no-repeat;color:transparent;'
  177. )
  178. },
  179. create() {
  180. //新增
  181. let postParams = {
  182. Name: this.ruleForm.Name,
  183. Theme: '111',
  184. Type: '111',
  185. Id: '77'
  186. }
  187. createLegend({ postParams }).then(res => {
  188. if (res.Result == 'success') {
  189. this.$message.success('添加图例成功!')
  190. }
  191. })
  192. },
  193. update() {
  194. //修改
  195. let postParams = this.ruleForm
  196. updateLegend({ postParams }).then(res => {
  197. if (res.Result == 'success') {
  198. this.$message.success('图例修改成功!')
  199. }
  200. })
  201. }
  202. },
  203. mounted() {}
  204. }
  205. </script>
  206. <style lang='less' scoped>
  207. .add-form {
  208. color: #646c73;
  209. margin: 16px 0 0 72px;
  210. font-size: 14px;
  211. .form1 {
  212. margin-bottom: 8px;
  213. .span1 {
  214. margin-right: 192px;
  215. }
  216. .span2 {
  217. margin-right: 220px;
  218. }
  219. }
  220. .form2 {
  221. display: flex;
  222. .input-left {
  223. width: 500px;
  224. .title {
  225. margin-right: 100px;
  226. margin: 20px 0 8px 0;
  227. display: inline-block;
  228. width: 250px;
  229. }
  230. .type {
  231. margin-right: 100px;
  232. margin: 20px 0 8px 0;
  233. display: inline-block;
  234. width: 250px;
  235. }
  236. }
  237. .input-right {
  238. width: 200px;
  239. height: 114px;
  240. background: rgba(245, 246, 247, 1);
  241. display: inline-block;
  242. margin-left: 18px;
  243. display: flex;
  244. align-items: center;
  245. justify-content: center;
  246. .model {
  247. width: 56px;
  248. height: 6px;
  249. }
  250. }
  251. }
  252. .form3 {
  253. width: 720px;
  254. height: 86px;
  255. background: rgba(245, 246, 247, 1);
  256. border-radius: 4px;
  257. margin-top: 20px;
  258. .form3-top {
  259. padding: 12px 0 8px 12px;
  260. .form3-span1 {
  261. margin-right: 102px;
  262. }
  263. .form3-span2 {
  264. margin-right: 78px;
  265. }
  266. .form3-span3 {
  267. margin-right: 64px;
  268. }
  269. .form3-span4 {
  270. margin-right: 130px;
  271. }
  272. }
  273. .form3-bottom {
  274. display: flex;
  275. }
  276. }
  277. .form4 {
  278. .form4-top {
  279. padding: 20px 0 8px 0;
  280. .form4-span1 {
  281. margin-right: 32px;
  282. }
  283. .form4-span2 {
  284. margin-right: 102px;
  285. }
  286. }
  287. }
  288. .form5 {
  289. width: 720px;
  290. height: 86px;
  291. background: rgba(245, 246, 247, 1);
  292. border-radius: 4px;
  293. margin-top: 20px;
  294. padding-left: 12px;
  295. .form5-top {
  296. padding: 12px 0 8px 0;
  297. }
  298. }
  299. .span2::after,
  300. .type::after,
  301. .form3-span1::after,
  302. .form3-span3::after {
  303. content: '*';
  304. color: #f56c6c;
  305. margin-left: 4px;
  306. }
  307. .upload-demo {
  308. display: flex;
  309. }
  310. }
  311. </style>