From deca70a11f6969d60bfa7ddcb153151f7c28e7ac Mon Sep 17 00:00:00 2001
From: zhutianqi <ztq_qi@sina.com>
Date: Thu, 5 Aug 2021 18:01:25 +0800
Subject: [PATCH] commit

---
 src/assets/styles/newStyle.less               |   4 +
 src/components/index.js                       |   2 +
 src/components/mySelect/index.vue             | 140 ++++++++++++++++++
 .../pages/creatProcess/bzjd/step3.vue         |  44 ++++--
 .../processCenter/pages/newProcess/index.vue  |   2 +-
 5 files changed, 177 insertions(+), 15 deletions(-)
 create mode 100644 src/components/mySelect/index.vue

diff --git a/src/assets/styles/newStyle.less b/src/assets/styles/newStyle.less
index 32e75bb19..2882fb567 100644
--- a/src/assets/styles/newStyle.less
+++ b/src/assets/styles/newStyle.less
@@ -909,4 +909,8 @@ tr.el-table__row{
 .button-list {
   padding: 5px 0px;
 }
+.myNewSelect {
+  backgrounnd: red;
+
+}
 
diff --git a/src/components/index.js b/src/components/index.js
index 50327d085..fde9957d4 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -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 {
diff --git a/src/components/mySelect/index.vue b/src/components/mySelect/index.vue
new file mode 100644
index 000000000..d741c70e5
--- /dev/null
+++ b/src/components/mySelect/index.vue
@@ -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>
diff --git a/src/pages/processCenter/pages/creatProcess/bzjd/step3.vue b/src/pages/processCenter/pages/creatProcess/bzjd/step3.vue
index 162232581..9b7748313 100644
--- a/src/pages/processCenter/pages/creatProcess/bzjd/step3.vue
+++ b/src/pages/processCenter/pages/creatProcess/bzjd/step3.vue
@@ -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
+                })
             })
         }
     }
diff --git a/src/pages/processCenter/pages/newProcess/index.vue b/src/pages/processCenter/pages/newProcess/index.vue
index 7d51974cb..3448e1f47 100644
--- a/src/pages/processCenter/pages/newProcess/index.vue
+++ b/src/pages/processCenter/pages/newProcess/index.vue
@@ -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;