修复语法错误

src/views/modules/common/user-component-all.vue

@@ -1,138 +1,125 @@
 <!-- 用户组件（返回更多信息） -->
 <template>
-    <div>
-      <el-select
-        v-model="value"
-        ref="select"
-        placeholder="请输入姓名"
-        clearable
-        filterable
-        remote
-        :disabled="disabled"
-        :remote-method="remoteMethod"
-        @change="onChange"
-        @focus="cancelReadOnly"
-        @hook:mounted="cancelReadOnly"
-        @visible-change="cancelReadOnly">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-        <el-option v-if="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
-      </el-select>
-    </div>
+  <div>
+    <el-select v-model="value" ref="select" placeholder="请输入姓名" clearable filterable remote :disabled="disabled"
+      :remote-method="remoteMethod" @change="onChange" @focus="cancelReadOnly" @hook:mounted="cancelReadOnly"
+      @visible-change="cancelReadOnly">
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+      </el-option>
+      <el-option v-if="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined"
+        @click.native="handleClick()"></el-option>
+    </el-select>
+  </div>
 </template>
 
 <script>
-  export default {
-    name: 'user-component',
-    props: {
-      userId: {
-        type: String,
-        default: ''
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data () {
-      return {
-        value: '',
-        current: 1,
-        size: 10,
-        name: '',
-        options: [],
-        loading: false,
-        noMore: false
-      }
+export default {
+  name: 'user-component',
+  props: {
+    userId: {
+      type: String,
+      default: ''
     },
-    watch: {
-      // userId (value) {
-      //   this.value = value
-      // }
-      userId:{
-        immediate:true,
-        handler(newUserId){
-          this.value = newUserId
-          this.checkItem(newUserId)
-        }
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      value: '',
+      current: 1,
+      size: 10,
+      name: '',
+      options: [],
+      loading: false,
+      noMore: false
+    }
+  },
+  watch: {
+    // userId (value) {
+    //   this.value = value
+    // }
+    userId: {
+      immediate: true,
+      handler(newUserId) {
+        this.value = newUserId
+        this.checkItem(newUserId)
       }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    async init() {
+      this.getList()
     },
-    mounted () {
-      this.init()
+    remoteMethod(query) {
+      this.options = []
+      this.current = 1
+      this.name = query
+      this.getList()
     },
-    methods: {
-      async init () {
-        this.getList()
-      },
-      remoteMethod (query) {
-        this.options = []
-        this.current = 1
-        this.name = query
-        this.getList()
-      },
-      getList () {
-        this.$http({
-          url: this.$http.adornUrl(`/user-service/user/list`),
-          method: 'get',
-          params: this.$http.adornParams({
-            'current': this.current,
-            'size': this.size,
-            'name': this.name
-          })
-        }).then(({data}) => {
-          if (data && data.code === '200') {
-            if (this.current > data.data.pages) {
-              return
-            }
-            this.noMore = data.data.records.length >= 10
-            data.data.records.forEach(item => {
-              this.options.push({
-                label: item.name + ' (' + item.orgName + ')',
-                value: item.userId,
-                name: item.name,
-                phone: item.mobile
-              })
-            })
-          } else {
-            this.options = []
-          }
-        })
-      },
-      handleClick () {
-        this.loadMore()
-      },
-      loadMore () {
-        this.current ++
-        this.getList()
-      },
-      onChange (item) {
-        this.options.forEach(val => {
-          if (val.value === item) {
-            this.$emit('change', val)
-          }
+    getList() {
+      this.$http({
+        url: this.$http.adornUrl(`/user-service/user/list`),
+        method: 'get',
+        params: this.$http.adornParams({
+          'current': this.current,
+          'size': this.size,
+          'name': this.name
         })
-      },
-      cancelReadOnly (onOff) {
-        this.$nextTick(() => {
-          if (!onOff) {
-            const input = this.$refs.select.$el.querySelector('.el-input__inner')
-            const timer = setTimeout(() => {
-              input.removeAttribute('readonly')
-              clearTimeout(timer)
-            }, 200)
+      }).then(({ data }) => {
+        if (data && data.code === '200') {
+          if (this.current > data.data.pages) {
+            return
           }
-        })
-      }
+          this.noMore = data.data.records.length >= 10
+          data.data.records.forEach(item => {
+            this.options.push({
+              label: item.name + ' (' + item.orgName + ')',
+              value: item.userId,
+              name: item.name,
+              phone: item.mobile
+            })
+          })
+        } else {
+          this.options = []
+        }
+      })
+    },
+    handleClick() {
+      this.loadMore()
+    },
+    loadMore() {
+      this.current++
+      this.getList()
+    },
+    onChange(item) {
+      this.options.forEach(val => {
+        if (val.value === item) {
+          this.$emit('change', val)
+        }
+      })
+    },
+    cancelReadOnly(onOff) {
+      this.$nextTick(() => {
+        if (!onOff) {
+          const input = this.$refs.select.$el.querySelector('.el-input__inner')
+          const timer = setTimeout(() => {
+            input.removeAttribute('readonly')
+            clearTimeout(timer)
+          }, 200)
+        }
+      })
     }
   }
+}
 </script>
 
 <style scoped>
-.el-select{
+.el-select {
   width: 100%;
 }
 </style>

src/views/modules/common/user-component.vue

@@ -31,15 +31,15 @@ export default {
     //   // 检查缺失item
     //   this.checkItem(value)
     // }
-    userId:{
-      immediate:true,
-      handler(newUserId){
+    userId: {
+      immediate: true,
+      handler(newUserId) {
         this.value = newUserId
         this.checkItem(newUserId)
       }
     }
   },
-  data () {
+  data() {
     return {
       value: '',
       current: 1,
@@ -50,20 +50,20 @@ export default {
       noMore: false
     }
   },
-  mounted () {
+  mounted() {
     this.init()
   },
   methods: {
-    async init () {
+    async init() {
       this.getList()
     },
-    remoteMethod (query) {
+    remoteMethod(query) {
       this.options = []
       this.current = 1
       this.name = query
       this.getList()
     },
-    getList () {
+    getList() {
       this.$http({
         url: this.$http.adornUrl(`/user-service/user/list`),
         method: 'get',
@@ -94,22 +94,22 @@ export default {
         }
       })
     },
-    handleClick () {
+    handleClick() {
       this.loadMore()
     },
-    loadMore () {
+    loadMore() {
       this.current++
       this.value = null
       this.getList()
     },
-    onChange (item) {
+    onChange(item) {
       if (item === 'undefined') {
         this.value = null
       }
       this.$emit('userSelected', item)
       this.$emit('userSelectedItem', { userId: item, userName: this.options.find(t => t.value === item).name })
     },
-    checkItem (code) {
+    checkItem(code) {
       if (!code || !this.options) return
       let i = this.options.findIndex(item => item.value === code)
       if (i > -1) return
@@ -129,7 +129,7 @@ export default {
         }
       })
     },
-    cancelReadOnly (onOff) {
+    cancelReadOnly(onOff) {
       this.$nextTick(() => {
         if (!onOff) {
           const input = this.$refs.select.$el.querySelector('.el-input__inner')

src/views/modules/common/user-components.vue

@@ -1,32 +1,19 @@
 <!-- 用户组件（多选） -->
 <template>
-    <div>
-      <el-select
-        v-model="value"
-        ref="select"
-        placeholder="请选择"
-        clearable
-        remote
-        multiple
-        :disabled="disabled"
-        :remote-method="remoteMethod"
-        @change="onChange"
-        @focus="cancelReadOnly"
-        @hook:mounted="cancelReadOnly"
-        @visible-change="cancelReadOnly">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-        <el-option v-if="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
-      </el-select>
-    </div>
+  <div>
+    <el-select v-model="value" ref="select" placeholder="请选择" clearable remote multiple :disabled="disabled"
+      :remote-method="remoteMethod" @change="onChange" @focus="cancelReadOnly" @hook:mounted="cancelReadOnly"
+      @visible-change="cancelReadOnly">
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+      </el-option>
+      <el-option v-if="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined"
+        @click.native="handleClick()"></el-option>
+    </el-select>
+  </div>
 </template>
 
 <script>
-import {selectUsers} from '@/api/user'
+import { selectUsers } from '@/api/user'
 export default {
   name: 'user-components',
   props: {
@@ -39,7 +26,7 @@ export default {
       default: false
     }
   },
-  data () {
+  data() {
     return {
       value: [],
       current: 1,
@@ -55,32 +42,32 @@ export default {
     //   this.value = value
     //   this.getList()
     // }
-    userIds:{
-      immediate:true,
-      handler(newUserIds){
+    userIds: {
+      immediate: true,
+      handler(newUserIds) {
         this.value = newUserIds
         this.getList()
       }
     }
   },
-  mounted () {
+  mounted() {
     this.init()
   },
   methods: {
-    async init () {
+    async init() {
       this.getList()
     },
-    remoteMethod (query) {
+    remoteMethod(query) {
       this.options = []
       this.current = 1
       this.name = query
       this.getList()
     },
-    getList () {
+    getList() {
       // console.log(JSON.stringify(this.userIds))
-      selectUsers({current: this.current, size: this.size, userIds: this.userIds}).then(({data}) => {
+      selectUsers({ current: this.current, size: this.size, userIds: this.userIds }).then(({ data }) => {
         if (data && data.code === '200') {
-            // 获取已选用户
+          // 获取已选用户
           if (data.data.selectedItems) {
             data.data.selectedItems.forEach(item => {
               let i = this.options.findIndex(i => i.value === item.userId)
@@ -112,23 +99,23 @@ export default {
         }
       })
     },
-    handleClick () {
+    handleClick() {
       this.loadMore()
     },
-    loadMore () {
-      this.current ++
+    loadMore() {
+      this.current++
       this.getList()
     },
-    onChange (item) {
+    onChange(item) {
       this.$emit('change', item)
       let array = []
       item.forEach(id => {
-        array.push({userId: id, userName: this.options.find(t => t.value === id).name})
+        array.push({ userId: id, userName: this.options.find(t => t.value === id).name })
       })
 
       this.$emit('userSelectedItems', array)
     },
-    cancelReadOnly (onOff) {
+    cancelReadOnly(onOff) {
       this.$nextTick(() => {
         if (!onOff) {
           const input = this.$refs.select.$el.querySelector('.el-input__inner')
@@ -144,7 +131,7 @@ export default {
 </script>
 
 <style scoped>
-.el-select{
+.el-select {
   width: 100%;
 }
 </style>