shaun-sheep 4 年 前
コミット
75f8d21664
2 ファイル変更187 行追加172 行削除
  1. 6 1
      src/api/brand/index.js
  2. 181 171
      src/components/supplement/sagaSupplement.vue

+ 6 - 1
src/api/brand/index.js

@@ -2,7 +2,7 @@
  * @Author: zhangyu
  * @Date: 2020-05-13 11:18:18
  * @Info:
- * @LastEditTime: 2020-05-18 11:27:42
+ * @LastEditTime: 2020-05-21 15:15:54
  */
 import {baseUrl} from '@/api/scan/config'
 import http from '@/api/scan/httpUtil'
@@ -68,3 +68,8 @@ export function brandQueryByClass(param, success) {
   http.postJson(url, param, success)
 }
 
+//查询最新创建过产品型号的5个品牌
+export function brandRecordQuery(param, success) {
+  let url = `${baseUrl}/prod/brand/recordQuery`
+  http.postJson(url, param, success)
+}

+ 181 - 171
src/components/supplement/sagaSupplement.vue

@@ -2,22 +2,27 @@
   <div class="saga-supplement-box">
     <div class="saga-brand-box">
       <el-tabs :tab-position="tabPosition" class="reset-steps" @tab-click="jump" v-model="stepActive">
-        <el-tab-pane :label="item.name || '信息'" v-for="item in labelKey" :key="item.name" />
+        <el-tab-pane label="基本信息" name="0"/>
+        <el-tab-pane label="技术参数" name="1"/>
+        <el-tab-pane label="附件信息" name="2"/>
       </el-tabs>
       <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
         <section class="d_jump">
           <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>基本信息</p>
           <el-form-item label="产品类型" prop="product">
-            <el-select v-model="ruleForm.product" placeholder="请选择">
-              <el-option-group v-for="group in productList" :key="group.label" :label="group.label">
-                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            <el-select v-model="ruleForm.product" filterable placeholder="请选择" @change="handleChangeProduct">
+              <el-option-group v-for="group in productList" :key="group.label" :label="group.text">
+                <el-option v-for="item in group.options" :key="item.Code" :label="item.AliasName"
+                           :value="item.Code"></el-option>
               </el-option-group>
             </el-select>
           </el-form-item>
           <el-form-item label="品牌" prop="brand">
-            <el-select v-model="ruleForm.brand" multiple :multiple-limit="1" filterable @focus="focus" remote
-              placeholder="请选择" :remote-method="remoteMethods" :loading="loading">
-              <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
+            <el-select v-model="ruleForm.brand" filterable remote @change="handleChangeBrand"
+                       placeholder="请选择" :remote-method="remoteMethods" :loading="loading">
+              <el-option v-for="item in brandList" :key="item.BrandID"
+                         :label="`${item.BrandCname}${item.BrandName?`(${item.BrandCname})`:''}`"
+                         :value="item.BrandID"/>
             </el-select>
           </el-form-item>
           <el-form-item label="型号" prop="type">
@@ -26,46 +31,92 @@
         </section>
         <section class="d_jump">
           <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>技术参数</p>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="CPU规格:">
-            <el-input />
-          </el-form-item>
+          <template v-for="(item,index) in TechnicalData">
+            <el-form-item :label="item.Name">
+              <el-input
+                v-if="item.InputMode == 'B1' || item.InputMode == 'B2'"
+                v-model="ruleForm[item.Code]"/>
+
+              <el-input
+                v-else-if="item.InputMode == 'A1'||item.InputMode == 'A2'"
+                type="number"
+                v-model="ruleForm[item.Code]">
+                <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
+              </el-input>
+
+              <el-select
+                v-else-if="item.InputMode == 'D1' || item.InputMode == 'E2'"
+                placeholder="请选择"
+                v-model="ruleForm[item.Code]">
+                <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
+              </el-select>
+
+              <el-select
+                v-else-if="item.InputMode == 'D2'"
+                placeholder="请选择"
+                v-model="ruleForm[item.Code]"
+                multiple
+                collapse-tags>
+                <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
+              </el-select>
+
+              <el-date-picker
+                v-else-if="item.InputMode == 'C6'"
+                v-model="ruleForm[item.Code]"
+                type="daterange"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"/>
+
+              <el-cascader
+                v-else-if="item.InputMode == 'D1L'"
+                placeholder="请选择"
+                :options="item.options"
+                v-model="ruleForm[item.Code]"
+                :props="item.props"
+                filterable
+                :show-all-levels="false"
+                clearable
+                style="width: 200px"/>
+
+              <el-input
+                v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'"
+                v-model="ruleForm[item.Code]">
+                <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
+              </el-input>
+
+              <el-date-picker
+                v-else-if="item.InputMode == 'C5'" v-model="ruleForm[item.Code]"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+                type="date">
+              </el-date-picker>
+
+              <el-input disabled title="暂不支持" v-else v-model="ruleForm[item.Code]"/>
+
+            </el-form-item>
+          </template>
+
 
         </section>
         <section class="d_jump">
           <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>附件信息</p>
-          <el-form-item label="设备文档:">
-            <uploadFiles :readOnly="read" :keysArr="keysArr" @change="changeItem" />
-          </el-form-item>
+          <template v-for="(item,index) in AttachmentInfo">
+            <el-form-item :label="item.Name">
+              <uploadFiles :readOnly="read" :keysArr="keysArr" @change="changeItem" v-model="ruleForm[item.Code]"/>
+<!--              <upload-files-->
+<!--                v-else-if="item.InputMode == 'F2'"-->
+<!--                v-model="ruleForm[item.Code]"-->
+<!--                :readOnly="false"-->
+<!--                :isShow="1"-->
+<!--                :keys-arr="Array.isArray(buildData[item.Path]) ? buildData[item.Path]:[] "-->
+<!--                :show-file-list="false"-->
+<!--                :context-key="item.Path"-->
+<!--                @change="changeItem"/>-->
+            </el-form-item>
+          </template>
+
         </section>
       </el-form>
     </div>
@@ -74,13 +125,15 @@
 
 <script>
   import uploadFiles from "@/components/public/uploadFiles"
-  import {prodRecordQuery} from "@/api/product"
+  import {defFuncidQuery, prodRecordQuery} from "@/api/product"
+  import {brandQueryByKeyword, brandRecordQuery} from "@/api/brand"
   import {mapGetters} from "vuex"
 
   export default {
     components: {uploadFiles},
     created() {
       this.getProdType()
+      this.getBrandNum5()
     },
     mounted() {
       console.log(this.$route.query)
@@ -88,139 +141,101 @@
       listener.addEventListener('scroll', this.onScroll)
       //  option
       this.list = this.states.map(item => {
-      return { value: `value:${item}`, label: `label:${item}` }
-    })
+        return {value: `value:${item}`, label: `label:${item}`}
+      })
 
-  },
-  data() {
-    let checkBrand = (rule, value, callback) => {
-      if (value == '') {
-        return callback(new Error('请选择品牌'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      read: false,
-      list: [],
-      keysArr: [],
-      loading: false,
-      states: ["Alabama", "Alaska", "Arizona",
-        "Arkansas", "California", "Colorado",
-        "Connecticut", "Delaware", "Florida",
-        "Georgia", "Hawaii", "Idaho", "Illinois",
-        "Indiana", "Iowa", "Kansas", "Kentucky",
-        "Louisiana", "Maine", "Maryland",
-        "Massachusetts", "Michigan", "Minnesota",
-        "Mississippi", "Missouri", "Montana",
-        "Nebraska", "Nevada", "New Hampshire",
-        "New Jersey", "New Mexico", "New York",
-        "North Carolina", "North Dakota", "Ohio",
-        "Oklahoma", "Oregon", "Pennsylvania",
-        "Rhode Island", "South Carolina",
-        "South Dakota", "Tennessee", "Texas",
-        "Utah", "Vermont", "Virginia",
-        "Washington", "West Virginia", "Wisconsin",
-        "Wyoming"],
-      bbs: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
-      brandList: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
-      productList: [{
-        label: '热门城市',
-        options: [{
-          value: 'Shanghai',
-          label: '上海'
-        }, {
-          value: 'Beijing',
-          label: '北京'
-        }]
-      }, {
-        label: '城市名',
-        options: [{
-          value: 'Chengdu',
-          label: '成都'
-        }, {
-          value: 'Shenzhen',
-          label: '深圳'
-        }, {
-          value: 'Guangzhou',
-          label: '广州'
-        }, {
-          value: 'Dalian',
-          label: '大连'
-        }]
-      }],
-      labelKey: [
-        {
-          name: '基本信息',
-        }, {
-          name: '技术参数',
-        }, {
-          name: '附件信息',
+    },
+    data() {
+      let checkBrand = (rule, value, callback) => {
+        if (value == '') {
+          return callback(new Error('请选择品牌'))
+        } else {
+          callback()
         }
-      ],
-      stepActive: '0',
-      tabPosition: 'left',
-      ruleForm: {
-        product: '',
-        brand: [],
-        type: '',
+      }
+      return {
+        TechnicalData: [],
+        AttachmentInfo: [],
+        read: false,
+        list: [],
+        keysArr: [],
+        loading: false,
+        bbs: [],
+        brandList: [],
+        productList: [],
+        stepActive: '0',
+        tabPosition: 'left',
+        ruleForm: {
+          product: '',
+          brand: [],
+          type: '',
 
-      },
-      rules: {
-        product: [
-          { required: true, message: '请选择产品类型', trigger: 'change' }
-        ],
-        brand: [
-          { required: true, validator: checkBrand, trigger: 'change' }
-        ],
-        type: [
-          { required: true, message: '请输入型号', trigger: 'blur' }
-        ]
+        },
+        rules: {
+          product: [
+            {required: true, message: '请选择产品类型', trigger: 'change'}
+          ],
+          brand: [
+            {required: true, validator: checkBrand, trigger: 'blur'}
+          ],
+          type: [
+            {required: true, message: '请输入型号', trigger: 'blur'}
+          ]
+        }
       }
-    }
   },
   computed: {
     ...mapGetters('layout', ['dictionary']),
   },
   methods: {
-    getProdType() {
+    getProdType() {// 获取产品类型
       let params = {
         Type: this.dictionary.dictionaryType,
         GroupId: this.dictionary.groupId,
         ProjectId: this.dictionary.projectId,
       }
       prodRecordQuery(params, res => {
+        res.Content.map(item => {
+          if (item.label == 'record') {
+            item.text = `最近使用`
+          } else if (item.label == 'all') {
+            item.text = ''
+          }
+        })
+        this.productList = res.Content
+      })
+    },
+    getBrandNum5() {// 获取最新创建过产品型号的5个品牌
+      let params = {
+        Type: this.dictionary.dictionaryType,
+        GroupId: this.dictionary.groupId,
+        ProjectId: this.dictionary.projectId,
+      }
+      brandRecordQuery(params, res => {
+        this.bbs = res.Content
+        this.brandList = res.Content
+      })
+    },
+    handleChangeProduct(item) {// 切换产品类型
+      let param = {
+        Type: this.dictionary.dictionaryType,
+        GroupId: this.dictionary.groupId,
+        ProjectId: this.dictionary.projectId,
+        ClassCode: item
+      }
+      defFuncidQuery(param, res => {
+        this.TechnicalData = []
+        res.Content.TechnicalData.forEach(i => {
+          for (let key in i) {
+            i[key].forEach(i => this.TechnicalData.push(i))
+          }
+        })
+        this.AttachmentInfo = res.Content.AttachmentInfo
       })
+
+    },
+    handleChangeBrand(item) {// 切换品牌
+      debugger
     },
     jump(tab, event) {
       this.stepActive = tab.index
@@ -269,22 +284,16 @@
       }
     },
     remoteMethods(query) {
-      console.log(query, 'query')
       if (query !== '') {
         this.loading = true
-        setTimeout(() => {
+        brandQueryByKeyword({keyword: query, PageSize: 50,}, res => {
           this.loading = false
-          this.brandList = this.list.filter(item => {
-            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
-          })
-        }, 200)
+          this.brandList = res.Content
+        })
       } else {
-        this.brandList = []
+        this.brandList = this.bbs
       }
     },
-    focus() {
-      this.brandList = this.bbs
-    },
     submitForm() {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
@@ -315,6 +324,7 @@
   position: relative;
   height: 800px;
   margin-top: 90px;
+  background: #fff;
 
   .saga-brand-box {
     width: 100%;