0514949lhj公务出访

src/components/Resource/OpOfficialActivities.vue

@@ -50,14 +50,14 @@
                         </el-form-item>
                     </div>
                     <div style="width: 385px;">
-                        <el-form-item label="公务单位:" prop="client" label-width="160px">
-                            <el-input clearable placeholder="公务单位" v-model="OpOfficialActivitiesDto.client">
+                        <el-form-item label="地区:" prop="area" label-width="160px">
+                            <el-input clearable placeholder="地区" v-model="OpOfficialActivitiesDto.area">
                             </el-input>
                         </el-form-item>
                     </div>
                     <div style="width: 385px;">
-                        <el-form-item label="地区:" prop="area" label-width="160px">
-                            <el-input clearable placeholder="地区" v-model="OpOfficialActivitiesDto.area">
+                        <el-form-item label="公务单位:" prop="client" label-width="160px">
+                            <el-input clearable placeholder="公务单位" v-model="OpOfficialActivitiesDto.client">
                             </el-input>
                         </el-form-item>
                     </div>
@@ -165,15 +165,24 @@
                 </div>
                 <div style="display: flex; flex-wrap: wrap;">
                     <div style="width: 770px;">
-                        <el-form-item label="公务请示范例:" label-width="160px">
-                            <el-input type="textarea" :rows="3" placeholder="公务请示范例" v-model="OpOfficialActivitiesDto.reqSample">
+                        <el-form-item style="position: relative;" label="公务请示范例:" label-width="160px">
+                            <el-input @blur="reqSampleblur" @focus="PostOfficialActivitiesReqReqSampleTips" type="textarea" :rows="3" placeholder="公务请示范例" v-model="OpOfficialActivitiesDto.reqSample">
                             </el-input>
+                            <div v-show="reqSampleArrpd" class="reqSampleArr-ul">
+                                <div @click="reqSampleArrli(item)" class="reqSampleArr-li" v-for="(item,index) in reqSampleArr" :key="index">
+                                    {{'['+item.teamName+']   '+item.reqSample}}
+                                </div>
+                            </div>
                         </el-form-item>
                     </div>
                     <div style="width: 770px;">
                         <el-form-item label="公务方背景:" prop="setting" label-width="160px">
-                            <el-input type="textarea" :rows="3" placeholder="公务方背景"
-                                v-model="OpOfficialActivitiesDto.setting"></el-input>
+                            <el-input 
+                            type="textarea" 
+                            :rows="3" 
+                            placeholder="公务方背景"
+                            v-model="OpOfficialActivitiesDto.setting">
+                            </el-input>
                         </el-form-item>
                     </div>
                     <div style="width: 770px;">
@@ -297,6 +306,8 @@ export default {
                 field: "",
                 reqSample: "",
             },
+            reqSampleArr:[],
+            reqSampleArrpd:false,
             OpOfficialActivitiesRules: {
                 officialForm: [
                     { required: true, message: '该信息为必填信息', trigger: 'blur' },
@@ -435,9 +446,43 @@ export default {
                 // that.$message.error("网络错误，请稍后重试");
             });
         },
-
+        //获取公务请示范例提示
+        PostOfficialActivitiesReqReqSampleTips(){
+            
+            var that = this;
+            var url = "/api/Resource/PostOfficialActivitiesReqReqSampleTips"
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + that.token
+                },
+                data: {
+                    country:that.OpOfficialActivitiesDto.country,
+                    area: that.OpOfficialActivitiesDto.area,
+                    client: that.OpOfficialActivitiesDto.client
+                }
+            }).then(function (res) {
+                if (res.data.code == 200) {
+                    console.log(res)
+                    that.reqSampleArrpd=true
+                    that.reqSampleArr=res.data.data;
+                    // that.$message({
+                    //     message: res.data.msg,
+                    //     type: 'success'
+                    // });
+                } else {
+                    that.$message.error(res.data.msg);
+                }
+            })
+        },
+        reqSampleblur(){
+            // setTimeout(this.reqSampleArrpd=false,2000)
+            setTimeout(() => {
+                this.reqSampleArrpd=false
+            }, 150);
+        },
         DiIdChang() {
-
             for (let index = 0; index < this.delegationInfoList.length; index++) {
                 if (this.delegationInfoList[index].id == parseInt(this.DiId)) {
                     this.delegationInfo = this.delegationInfoList[index];
@@ -445,6 +490,11 @@ export default {
                 }
             }
         },
+        reqSampleArrli(val){
+            console.log(val);
+            this.OpOfficialActivitiesDto.reqSample=val.reqSample;
+            this.reqSampleArrpd=false;
+        },
         QueryOfficialActivitiesById() {
             var url = "/api/Resource/QueryOfficialActivitiesById"
             var that = this
@@ -761,6 +811,7 @@ export default {
     margin-bottom: 20px;
     justify-content: space-between;
     align-items: center;
+    
 }
 
 .appraise-box {
@@ -797,6 +848,23 @@ export default {
 .visit-box .el-select{
     width: 100%;
 }
+.reqSampleArr-ul{
+    position:absolute;
+    z-index:1;
+    background-color: #FFFFFF;
+    box-shadow: #5555 0 0 10px;
+    border-radius:5px ;
+    max-height: 400px;
+    overflow: auto;
+}
+.reqSampleArr-li:hover{
+    background-color: #5551;
+}
+.reqSampleArr-li{
+    line-height: 20px;
+    padding: 10px;
+    cursor: pointer;
+}
 @media screen and (max-width: 1700px) {
     .appraise-box>div {
         width: 48%;