出入库管理-入库申请 类型下拉调整为二级

src/views/modules/common/material-type-component.vue

@@ -1,29 +1,18 @@
 <template>
     <div>
-      <el-select
+      <el-cascader
         v-model="value"
-        ref="select"
-        placeholder="请选择"
-        clearable
+        :options="options"
+        :props="{ expandTrigger: 'hover' }"
         filterable
-        remote
-        :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="options.length > 0" label="加载更多" style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
-      </el-select>
+        placeholder="请选择"
+        @change="handleChange">
+        </el-cascader>
     </div>
 </template>
 
 <script>
+  import 'element-ui/lib/theme-chalk/index.css'
   export default {
     name: 'material-type-component',
     props: {
@@ -39,15 +28,11 @@
     watch: {
       typeId (value) {
         this.value = value
-        // 检查缺失item
-        this.checkItem(value)
       }
     },
     data () {
       return {
         value: '',
-        current: 1,
-        size: 10,
         name: '',
         options: [],
         loading: false,
@@ -61,15 +46,9 @@
       async init () {
         this.getList()
       },
-      remoteMethod (query) {
-        this.options = []
-        this.current = 1
-        this.name = query
-        this.getList()
-      },
       getList () {
         this.$http({
-          url: this.$http.adornUrl(`/biz-service/wh-category/list`),
+          url: this.$http.adornUrl(`/biz-service/stock-mg-ctl/listCategory`),
           method: 'get',
           params: this.$http.adornParams({
             'current': this.current,
@@ -78,66 +57,19 @@
           })
         }).then(({data}) => {
           if (data && data.code === '200') {
-            if (this.current > data.data.pages) {
-              return
-            }
-            data.data.records.forEach(item => {
-              let i = this.options.findIndex(a => a.value === item.id)
-              if (i < 0) {
-                this.options.push({
-                  label: item.name,
-                  value: item.id
-                })
-              }
-            })
+            this.options = data.data;
           } else {
             this.options = []
           }
         })
       },
-      handleClick () {
-        this.loadMore()
-      },
-      loadMore () {
-        this.current ++
-        this.getList()
-      },
-      onChange (item) {
+      handleChange (item) {
         // console.log(item)
         if (item === 'undefined') {
           // console.log('m1')
           this.value = null
         }
-        this.$emit('typeSelected', item)
-      },
-      checkItem (code) {
-        console.log('code = ' + code)
-        if (!code || !this.options) return
-        let i = this.options.findIndex(item => item.value === code)
-        if (i > -1) return
-        // info
-        this.$http({
-          url: this.$http.adornUrl(`/biz-service/wh-category/info/${code}`),
-          method: 'get'
-        }).then(({data}) => {
-          if (data && data.code === '200' && data.data) {
-            this.options.push({
-              label: data.data.name,
-              value: data.data.id
-            })
-          }
-        })
-      },
-      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)
-          }
-        })
+        this.$emit('typeSelected', item[1])
       }
     }
   }