nsgk_mobile/src/views/sunVillage_info/otherOpen/otherOpenEdit.vue

 <template>
     <div class="home_wrapper">
         <div class="header_main">
           {{titlePreifx}}{{title}}
             <div class="return_btn" @click="back()"></div>
         </div>

       <van-form ref="formData" :show-error-message="false" @submit="submit">
         <div class="list_main">

           <field-select
             v-if="showTypeSelector"
             v-model="form.otherType"
             label="公开类型"
             value-key="dictLabel"
             data-key="dictValue"
             placeholder="请选择公开类型"
             :rules="rules.otherType"
             required
             size="large"
             :columns="otherTypeOptions"/>

           <van-field name="otherName" v-model="form.otherName" label="公开名称" input-align="right" required :rules="rules.otherName" placeholder="请输入公开名称" size="large" :maxlength="150"/>

           <field-date-picker
             name="openAt"
             class="field_no-label"
             v-model="form.openAt"
             placeholder="请选择公开时间"
             formatter="yyyy-MM-dd"
             input-align="right"
             type="date"
             label="公开时间"
             :required="true"
             :rules="rules.openAt"
             size="large"
           />
           <van-field name="openContent" label="公开内容" size="large" :border="false"/>
           <vue-html5-editor :content="content" :height="300" @change="updateData" style="margin-top: 0.2rem;"></vue-html5-editor>

           <van-field
             name="openPic"
             label="公开图片"
             input-align="right"
             :border="false"
           >
           </van-field>
           <CommonUpload name="openPic" v-model="form.openPic" accept="image/*" multiple/>

           <van-field
                   name="openFile"
                   label="公开文件"
                   input-align="right"
                   :border="false"
           >
           </van-field>
           <CommonUpload name="openFile" v-model="form.openFile" accept="*" multiple/>

           <van-field name="remark" v-model="form.remark" label="备注" input-align="left" size="large" :maxlength="255" placeholder="请输入备注"/>

         </div>

         <div style="margin: 16px auto;width: 50%;">
           <van-button round block type="primary" native-type="submit">
             保存
           </van-button>
         </div>

       </van-form>
     </div>
 </template>
 <script>
   import CommonUpload from "@/components/form/CommonUpload.vue";
   import FieldDatePicker from "@/components/form/FieldDatePicker.vue";
   import {Toast} from "vant";
   import {addOther, getOther, updateOther} from "@/api/sunVillage_info/otherOpen";
   import FieldSelect from "@/components/form/FieldSelect.vue";
   export default {
     name: "otherOpenEdit",
     components: {FieldSelect, FieldDatePicker, CommonUpload},
     data() {
       return {
         form: {
           id: null,
           bookId: null,
           deptId: null,
           deptName: null,
           otherName: null,
           otherType: null,
           openYear: null,
           openAt: null,
           openContent: null,
           openFile: null,
           openPic: null,
           remark: null,
           createBy: null,
           createTime: null,
           updateBy: null,
           updateTime: null,
         },
         rules: {
           openAt: [{message: '请选择公开时间', required: true}],
           otherName: [{message: '请输入公开名称', required: true}],
           otherType: [{message: '请选择公开类型', required: true}],
         },
         id: null,
         intent: null,
         content: '',
         otherTypeOptions: [],
         otherType: null,
         title: '综合公开',
       };
     },
     created() {
       this.id = this.$route.query.id;
       this.intent = this.$route.query.intent;
       this.otherType = this.$route.query.otherType;
       if(this.isEdit)
        this.getDetail();
       else
       {
         this.form.otherType = this.$route.query.otherType;
         this.getDicts('other_gk_type').then((resp) => {
           this.otherTypeOptions = resp.data;
           const dict = resp.data.find((x) => x.dictValue == this.form.otherType);
           if(dict)
             this.title = dict.dictLabel;
         });
       }
     },
     methods: {
       getDetail() {
         if(!this.id)
         {
           this.back();
           return;
         }

         getOther(this.id).then((resp) => {
           this.form = resp.data;
           this.content = this.form.openContent || '';
           this.getDicts('other_gk_type').then((resp) => {
             const dict = resp.data.find((x) => x.dictValue == this.form.otherType);
             if(dict)
               this.title = dict.dictLabel;
           });
         });
       },
       back(ti) {
         if(ti > 0)
           setTimeout(() => this.$router.back(), ti);
         else
          this.$router.back();
       },
       updateData(t) {
         this.form.openContent = t;
       },
       submit() {
         const loading = Toast.loading({
           message: '保存中...',
           duration: 0,
         });
         if(this.form.id)
         {
           updateOther(this.form).then((resp) => {
             this.$notify({ type: 'success', message: '保存成功' });
             this.back(1500);
           }).finally(() => {
             loading.clear();
           });
         }
         else
         {
           addOther(this.form).then((resp) => {
             this.$notify({ type: 'success', message: '新增成功' });
             this.back(1500);
           }).finally(() => {
             loading.clear();
           });
         }
       },
     },
     computed: {
       isAdd() {
         return this.intent === 'add';
       },
       isEdit() {
         return this.intent === 'edit';
       },
       titlePreifx() {
         return this.intent === 'edit' ? '编辑' : '新增';
       },
       showTypeSelector() {
         return this.isAdd && !this.otherType;
       },
     },
   }
 </script>
 <style scoped lang="scss">
   /deep/ .van-button--primary{
     background: url("../../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
     background-size: 100% 100%;
     border: none;
   }
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        position: relative;

        .return_btn {
            width: 24px;
            height: 43.2px;
            background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }

        .add_btn {
            width: 56.4px;
            height: 40.8px;
            background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
    .list_main{
      padding:25px;
      background: #ffffff;
      width: 94%;
      margin: 25px auto 0;
      border-radius: 15PX;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    }
    .titBox{
      display: flex;
      align-items: center;
    }
    .tit{
      font-size: 36px;
      font-weight: bold;
    }
    /deep/ .van-cell{
      padding-left: 0!important;
      padding-right: 0!important;
      padding-bottom: 0!important;
    }
    /deep/ .van-field__label{
      padding-left: 10PX;
      width: 8.2em;
    }
    /deep/ .van-cell--required::before{
      left: 0;
    }

}







 </style>