Переглянути джерело

解决图例库上传图标限制,线条选择显示

shaun-sheep 4 роки тому
батько
коміт
cc79abb754
3 змінених файлів з 12754 додано та 13 видалено
  1. 12723 0
      package-lock.json
  2. 2 2
      package.json
  3. 29 11
      src/views/legendLibrary/addForm.vue

Різницю між файлами не показано, бо вона завелика
+ 12723 - 0
package-lock.json


+ 2 - 2
package.json

@@ -28,10 +28,10 @@
         "@typescript-eslint/eslint-plugin": "^2.26.0",
         "@typescript-eslint/parser": "^2.26.0",
         "@vue/cli-plugin-babel": "^4.1.0",
-        "@vue/cli-plugin-eslint": "^4.1.0",
+        "@vue/cli-plugin-eslint": "^4.4.1",
         "@vue/cli-plugin-router": "^4.1.0",
-        "@vue/cli-plugin-vuex": "^4.1.0",
         "@vue/cli-plugin-typescript": "^4.3.0",
+        "@vue/cli-plugin-vuex": "^4.1.0",
         "@vue/cli-service": "^4.1.0",
         "@vue/eslint-config-typescript": "^5.0.2",
         "babel-eslint": "^10.0.3",

+ 29 - 11
src/views/legendLibrary/addForm.vue

@@ -16,11 +16,19 @@
                     <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
                 </el-select>
             </div>
-            <div class='input-right' v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Icon"'>
+            <div class='input-right' v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Icon" || ruleForm.Type =="Line"'>
+                <div v-if=' ruleForm.Type=="Icon" ' class='input-right'>
+                    <img :src='`/serve/Picture/query/${imgSrc}`' alt />
+                </div>
                 <div
+                    v-else-if='ruleForm.Type=="Zone" '
                     class='model'
                     :style='`background:${ruleForm.color};border-width:${ruleForm.borderLine}px;border-style:${ruleForm.borderColor}; border-color:${ruleForm.borderColor};`'
                 ></div>
+                <div v-else class='model'>
+                    <img :src='linepxObject.src' alt v-if='linepxObject.src' />
+                    <img :src='borderLineOptionObject.src' alt v-if='borderLineOptionObject.src' />
+                </div>
             </div>
         </div>
         <div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
@@ -56,7 +64,13 @@
         <div v-if='ruleForm.Type=="Icon"' class='form5'>
             <div class='form5-top'>上传新图标</div>
             <div>
-                <el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' :http-request='getFile' :file-list='fileList'>
+                <el-upload
+                    class='upload-demo'
+                    action='https://jsonplaceholder.typicode.com/posts/'
+                    :http-request='getFile'
+                    :file-list='fileList'
+                    :on-change='handleChange'
+                >
                     <el-button size='small' style='color:#1F2329;'>点击上传</el-button>
                 </el-upload>
             </div>
@@ -138,7 +152,9 @@ export default {
             ],
             fileList: [],
             imgSrc: '', //图标的key,/serve/Picture/query/${imgSrc}
-            value: ''
+            value: '',
+            linepxObject: {},
+            borderLineOptionObject: {}
         }
     },
     props: ['ruleForm'],
@@ -151,24 +167,23 @@ export default {
             uploadImg({ postParams }).then(res => {
                 if (res.Result == 'success') {
                     this.imgSrc = res.EntityList[0]
+
                     this.$message.success('图标上传成功!')
                 }
             })
         },
-        changeSelection() {
-            console.log(this.ruleForm.linepx)
-            let path = this.$refs.select.selectedLabel
+        changeSelection(val) {
+            this.linepxObject = val && this.linepxOption.find(item => item.id == val)
             this.$refs.select.$el.children[0].children[0].setAttribute(
                 'style',
-                'background:url(' + path + ') center center no-repeat;color:transparent;'
+                'background:url(' + this.linepxObject.src + ') center center no-repeat;color:transparent;'
             )
         },
-        changeSelection1() {
-            console.log(this.ruleForm.borderLine)
-            let path = this.$refs.select1.selectedLabel
+        changeSelection1(val) {
+            this.borderLineOptionObject = val && this.borderLineOption.find(item => item.id == val)
             this.$refs.select1.$el.children[0].children[0].setAttribute(
                 'style',
-                'background:url(' + path + ')  center center no-repeat;color:transparent;'
+                'background:url(' + this.borderLineOptionObject.src + ')  center center no-repeat;color:transparent;'
             )
         },
         create() {
@@ -194,6 +209,9 @@ export default {
                     this.$emit('updateSuccess')
                 }
             })
+        },
+        handleChange(file, fileList) {
+            this.fileList = fileList.slice(-1)
         }
     },
     mounted() {}