|
@@ -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%;
|