This commit is contained in:
zhutianqi
2021-08-05 18:01:25 +08:00
parent 304365dcec
commit deca70a11f
5 changed files with 177 additions and 15 deletions
+4
View File
@@ -909,4 +909,8 @@ tr.el-table__row{
.button-list {
padding: 5px 0px;
}
.myNewSelect {
backgrounnd: red;
}
+2
View File
@@ -24,6 +24,7 @@ import DeptRoleTree from './deptRoleTree' // 根据部门查询角色
import RoleTree from './roleTree' // 查询所有机构及人员
import SQTree from './SQTree'
import OrgTable from './OrgTable'
import MySelect from './mySelect'
const install = function (Vue) {
Vue.component('loading', Loading)
@@ -48,6 +49,7 @@ const install = function (Vue) {
Vue.component('SQTree', SQTree)
Vue.component('OrgTable', OrgTable)
Vue.component('RoleTree', RoleTree)
Vue.component('MySelect', MySelect)
}
export default {
+140
View File
@@ -0,0 +1,140 @@
<template>
<div id="mySelect">
<el-dropdown placement="bottom" @command="handleCommand" trigger="click">
<div class="my-select-input__wrap">
<input class="el-input__inner" type="text" v-model.lazy="selectVal" v-show="false">
<input class="el-input__inner" type="text" v-model.lazy="showLabel" readonly="readonly">
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(item,index) in options"
:key="index"
:command="item">{{ item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
name: "mySelect",
data() {
return {
showLabel: '',
activeLi: '',
active: false,
selectVal: ''
}
},
props: {
value: {
type: String,
required: true
},
options: { // option
type: Array,
default: () => {
return []
}
}
},
methods: {
handleCommand (row) {
this.selectVal = row.label
this.showLabel = row.label
this.active = !this.active
this.$emit('update:value', this.selectVal);
}
},
watch: {
value: {
immediate: true,
handler (val) {
this.selectVal = val
for (let a = 0; a < this.options.length; a++) {
if (this.selectVal === this.options[a].value) {
this.showLabel = this.options[a].label
}
}
}
}
},
mounted() {
for (let a = 0; a < this.options.length; a++) {
if (this.selectVal === this.options[a].value) {
this.showLabel = this.options[a].label
}
}
}
}
</script>
<style scoped lang="less">
#mySelect {
}
.active {
background-color: rgb(245, 247, 250);
}
/*ul {*/
/* position: absolute;*/
/* z-index: 9999;*/
/* background-color: rgb(255, 255, 255);*/
/* box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;*/
/* box-sizing: border-box;*/
/* border-width: 1px;*/
/* border-style: solid;*/
/* border-color: rgb(228, 231, 237);*/
/* border-image: initial;*/
/* border-radius: 4px;*/
/* box-sizing: border-box;*/
/* list-style: none;*/
/* padding: 6px 0px;*/
/* margin: 0px;*/
/* display: block;*/
/* list-style-type: disc;*/
/* margin-block-start: 1em;*/
/* margin-block-end: 1em;*/
/* margin-inline-start: 0px;*/
/* margin-inline-end: 0px;*/
/* width: 100%;*/
/* li {*/
/* list-style:none;*/
/* height: 34px;*/
/* line-height: 34px;*/
/* padding: 0 20px;*/
/* }*/
/* li:hover {*/
/* background-color: rgb(245, 247, 250);*/
/* }*/
/*}*/
/*.mySelect {*/
/* width: 100%;*/
/* position: relative;*/
/* option {*/
/* height: 34px;*/
/* line-height: 34px;*/
/* padding: 0 20px;*/
/* }*/
/*}*/
/*.mySelect:focus + .myIcon{*/
/* transform:rotate(180deg);*/
/* -ms-transform:rotate(180deg); !* IE 9 *!*/
/* -moz-transform:rotate(180deg); !* Firefox *!*/
/* -webkit-transform:rotate(180deg); !* Safari 和 Chrome *!*/
/* -o-transform:rotate(180deg);*/
/*}*/
/*.mySelect:focus-within + .myIcon{*/
/* transform:rotate(180deg);*/
/* -ms-transform:rotate(180deg); !* IE 9 *!*/
/* -moz-transform:rotate(180deg); !* Firefox *!*/
/* -webkit-transform:rotate(180deg); !* Safari 和 Chrome *!*/
/* -o-transform:rotate(180deg);*/
/*}*/
/*.myIcon {*/
/* position: absolute;*/
/* right: 7px;*/
/* top: calc(~'50% - 7px');*/
/* transition: all .3s;*/
/*}*/
</style>
@@ -114,7 +114,9 @@
label="核心技术要求"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.technicalRequir" placeholder="请输入核心技术要求" />
<div class="el-input">
<input class="el-input__inner" type="text" v-model.lazy="scope.row.technicalRequir" placeholder="请输入核心技术要求">
</div>
</template>
</el-table-column>
<el-table-column
@@ -123,7 +125,9 @@
label="基于上一版本差异"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.changePoint" placeholder="请输入基于上一版本差异" />
<div class="el-input">
<input class="el-input__inner" type="text" v-model.lazy="scope.row.changePoint" placeholder="请输入基于上一版本差异">
</div>
</template>
</el-table-column>
<el-table-column
@@ -133,7 +137,9 @@
label="相对于国行标差异点"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.changePoint" placeholder="请输入相对于国行标差异点" />
<div class="el-input">
<input class="el-input__inner" type="text" v-model.lazy="scope.row.changePoint" placeholder="请输入相对于国行标差异点" >
</div>
</template>
</el-table-column>
<el-table-column
@@ -142,10 +148,7 @@
label="符合项状态"
align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.complianceRequir">
<el-option value="1" label="符合" key="1"></el-option>
<el-option value="2" label="不符合" key="2"></el-option>
</el-select>
<My-select v-model="scope.row.complianceRequir" :options="fhList"></My-select>
</template>
</el-table-column>
<el-table-column
@@ -154,7 +157,9 @@
label="合规性分析"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.complianceState" placeholder="请输入合规性分析" />
<div class="el-input">
<input class="el-input__inner" type="text" v-model.lazy="scope.row.complianceState" placeholder="请输入合规性分析">
</div>
</template>
</el-table-column>
<el-table-column
@@ -164,7 +169,7 @@
align="center">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.newData"
v-model.lazy="scope.row.newData"
type="date"
placeholder="选择新车型实施日期">
</el-date-picker>
@@ -177,7 +182,7 @@
align="center">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.onlineData"
v-model.lazy="scope.row.onlineData"
type="date"
placeholder="选择新车型实施日期">
</el-date-picker>
@@ -189,9 +194,7 @@
label="适用车型"
align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.applyArctic">
<el-option v-for="(item,index) in cxList" :value="item.label" :label="item.label" :key="index"></el-option>
</el-select>
<My-select v-model="scope.row.applyArctic" :options="cxList"></My-select>
</template>
</el-table-column>
<el-table-column
@@ -367,6 +370,16 @@
name: "bzjdStep3",
data() {
return {
fhList: [
{
value: '1',
label: '符合'
},
{
value: '2',
label: '不符合'
}
],
cxList: [],
histortData: [],
plForm: {
@@ -545,9 +558,9 @@
item.changePoint = item.changePoint || ''
item.technicalRequir = item.technicalRequir || ''
item.itemsTitle = item.itermsConditions
item.applyArctic = item.applyArctic || ''
})
this.itemList = itemList
console.log(this.itemList)
this.loading = false
}).catch(e => {
})
@@ -561,6 +574,9 @@
_this: this
}, res => {
this.cxList = res.data.ENERGYTYPES // 适用车型
this.cxList.forEach(item => {
item.value = item.label
})
})
}
}
@@ -165,7 +165,6 @@
<div class="process-box">
</div>
</div>
</div>
</template>
<script>
@@ -350,6 +349,7 @@ export default {
border-radius: 10px;
}
.card-box {
cursor: pointer;
.card-top {
width: 100%;
background: #2d8cf0;