yos_web/src/HManagement/notice/list/modules/edit.vue

<template>
  <div class="inline-16">
    <el-button size="small" type="text" @click="onshow(drawer=true)">详情</el-button>
    <el-drawer
        title="编辑"
        :visible.sync="drawer"
        :with-header="false"
        direction="rtl"
        size="90%"
        append-to-body
        @close="drawer = false">
      <div class="detail__panel">
        <div class="container normal-panel normal-margin sticky">
          <el-button class="inline-16" v-if="edit" :disabled="form.status == '发布'" type="primary" size="small"  @click="onEdit()" >编 辑</el-button>
          <p class="inline-16" v-if="save">编辑</p>
          <release  class="inline-16" v-if="tool.checkAuth($route.name,'update') && status"  :data="form" @onSuccess="onSuccess"></release>
          <topping  class="inline-16" v-if="tool.checkAuth($route.name,'update') && status" :data="form" @onSuccess="onSuccess"></topping>
          <Del v-if="tool.checkAuth($route.name,'delete') && form.status == '新建'" @onSuccess="drawer=false,$router.push({path:'/notice_mag_list'})" :data="{sat_noticeid:$route.query.id}"/>
          <!-- <delete-btn :id="$route.query.id" nameId="20221101095103" nameKey="sat_noticeids" v-if="form.status == '新建'" type="detail" class="inline-16" @deleteSuccess="drawer=false"></delete-btn> -->
        </div>
        <div style="overflow-x:hidden">
          <el-row :gutter="16">
            <el-col :span="13">
              <div class="container normal-panel normal-margin">
                <p class="normal-title normal-margin">通告设置</p>
                <el-row :gutter="16">
                  <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="right" size="small" :disabled="edit">
                    <el-col :span="24">
                      <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="导语" prop="summary">
                        <el-input v-model="form.summary"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="板块" prop="sat_notice_classid">
                        <el-select v-model="form.sat_notice_classid" placeholder="请选择">
                          <el-option v-for="item in options" :key="item.sat_notice_classid" :label="item.classname"
                                     :value="item.sat_notice_classid">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="生效日期" prop="begdate">
                        <el-date-picker style="width:100%" v-model="form.begdate" value-format="yyyy-MM-dd" type="date"
                                        placeholder="生效日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="截止日期" prop="enddate">
                        <el-date-picker style="width:100%" v-model="form.enddate" value-format="yyyy-MM-dd" type="date"
                                        placeholder="截止日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="是否置顶">
                        <el-radio-group v-model="form.isontop">
                          <el-radio :label="1">置顶</el-radio>
                          <el-radio :label="0">不置顶</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="通告封面">
                        <previewImage v-if="form.cover" style="width:256px" :image="image" :deletebtn="true"
                                      @onSuccess="clearCover"></previewImage>
                        <upload v-else btntype="image" :folderid="folderid" accept=".JPG,.PNG"
                                :bindData="{ ownertable: 'sat_notice', ownerid: form.sat_noticeid, usetype: 'cover' }"
                                @onSuccess="onCoverSubmit"></upload>
                        <p class="info">注：建议上传图片大小130x80像素，大小不超过2M，格式为JPG/PNG</p>
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-row>
              </div>
              <div class="container normal-panel normal-margin">
                <attachmentList :attinfos="attinfo_video" @onSuccess="queryNoticeMain" :onlyread="store.state.pageOnlyRead" >
                  <p slot="title">视频附件</p>
                  <upload slot="upload" accept=".mp4,.ogg,.webm" :folderid="folderid"
                          :bindData="{ ownertable: 'sat_notice', ownerid: form.sat_noticeid, usetype: 'default' }"
                          @onSuccess="onUploadSuccess"></upload>
                </attachmentList>
              </div>
              <div class="container normal-panel normal-margin">
                <attachmentList :attinfos="attinfo_attachment" @onSuccess="queryNoticeMain" :onlyread="store.state.pageOnlyRead" >
                  <upload slot="upload" :folderid="folderid"
                          :bindData="{ ownertable: 'sat_notice', ownerid: form.sat_noticeid, usetype: 'default' }"
                          @onSuccess="onUploadSuccess"></upload>
                </attachmentList>
              </div>
              <div class="container normal-panel normal-margin">
                <myEditor ref="editor" :content="form.content" :id="form.sat_noticeid" :disabled="!save"></myEditor>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="container normal-panel normal-margin">
<!--                <scopeOfauth :defaultData="defaultData" appidname="sat_noticeid" obiectName="sat_notice" :dataid="$route.query.id"
                             @onChecked="onChecked"></scopeOfauth>-->
                <scopeOfauth :defaultData="defaultData" :disabled="form.status == '发布'" appidname="sat_noticeid" obiectName="sat_notice" :dataid="id"
                             @onChecked="onChecked"></scopeOfauth>
              </div>
            </el-col>
          </el-row>
        </div>
        <!--        <router-view v-if = "drawer"/>-->
      </div>
      <div class="fixed__btn__panel" v-show="save">
        <el-button size="small" @click="onClose" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width">保 存</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import upload from '@/components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
import attachmentList from '@/components/attachment_list/index.vue'
import scopeOfauth from '@/components/scopeOfAuthority/index.vue'
import myEditor from '@/components/my-editor/Editor.vue'
import store from '@/store'
import release from './release'
import topping from './tp.vue'
import Del from './delete'
export default {
  components: {
    upload,
    previewImage,
    attachmentList,
    scopeOfauth,
    myEditor,
    release,
    topping,
    Del
  },
  props:["id"],
  data() {
    var checkTime = (rule, value, callback) => {
      if (this.form.enddate) {
        if (new Date(value).getTime() > new Date(this.form.enddate).getTime()) {
          callback(new Error('生效日期不能大于截止日期'));
        } else {
          callback()
        }
      }     
    };
    var checkTime2 = (rule, value, callback) => {
      if (this.form.begdate) {
        if (new Date(value).getTime() < new Date(this.form.begdate).getTime()) {
          callback(new Error('截止日期不能小于生效日期'));
        } else {
          callback()
        }
      }     
    };
    return {
      store,
      edit:true,
      save:false,
      status:false,
      folderid: JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      rules: {
        title: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
        ],
        begdate: [
          { required: true, message: '请选择生效日期', trigger: 'change' },
          { required: true, validator: checkTime, trigger: 'change' },
        ],
        enddate: [
          { required: true, message: '请选择截止日期', trigger: 'change' },
          { required: true, validator: checkTime2, trigger: 'change' },
        ],
        sat_notice_classid: [
          { required: true, message: '请选择版块', trigger: 'change' }
        ],
      },
      form: {
        "title": "",
        "notes": "",
        "istextrequired": 1,
        "isattrequired": 1,
        "onceonly": 1,
        "sat_submiteditmodelid": "0",
        "begdate": "",
        "enddate": "",
        "issecret": false
      },
      defaultData: {},
      image: {},
      authData: {},
      attinfo_video: [],
      attinfo_attachment: [],
      options: [],
      drawer:false
    }
  },
  watch: {
    drawer (val) {
      if(!val) {
        this.save =false
        this.edit = true
      }
    },
    edit (val) {
      if(val) {
        this.$store.dispatch('pageOnlyRead',true)
      } else {
        this.$store.dispatch('pageOnlyRead',false)
      }
    }
  },
  methods: {
    onUploadSuccess() {
      this.form.status !== '新建' ? this.queryNoticeMain() : this.onSubmit()
    },
    onSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;
        this.form.content = this.$refs.editor.html
        const res = await this.$api.requested({
          "id": "20221101094803",
          "method": "insertormodify_notice",
          "content": this.form
        })
        this.tool.showMessage(res,() => {
          this.edit = true
          this.save = false
          this.insertCoursewareauth()
          this.queryNoticeMain()
          this.$emit("updateSuccess")
        })
      });
    },
    //通告详情
    async queryNoticeMain() {
      const res = await this.$api.requested({
        "id": "20221101095003",
        // "method": "queryNoticeMain",
        "content": {
          "sat_noticeid": this.id
        }
      })
      this.attinfo_video = res.data.attinfos.filter(e => {
        if (e.postfix === 'mp4' || e.postfix === 'ogg' || e.postfix === 'webm') {
          return e
        }
      })
      this.attinfo_attachment = res.data.attinfos.filter(e => {
        if (e.postfix !== 'mp4' && e.postfix !== 'ogg' && e.postfix !== 'webm') {
          return e
        }
      })
      this.form = Object.assign({}, this.form, res.data)
      this.form.status !== '新建'?this.$store.dispatch('pageOnlyRead',true):this.$store.dispatch('pageOnlyRead',false)
      if(!this.save) {
        this.$store.dispatch('pageOnlyRead',true)
      } else {
        this.$store.dispatch('pageOnlyRead',false)
      }
      this.queryFileLink()
      this.queryNoticeClass()
      console.log("获取通告详细数据")
      console.log(this.form)
      this.status = true
    },
    // 通告板块
    async queryNoticeClass() {
      const res = await this.$api.requested({
        "id": "20221101094603",
        "content": {
          "pageNumber": 1,
          "pageSize": 1000,
          "where": {
            "condition": ""
          }
        }
      })
      console.log("板块")
      console.log(res)
      this.options = res.data
      this.form.sat_notice_classid = res.data[0].sat_notice_classid
    },
    // 获取封面信息
    async queryFileLink() {
      this.dialogEditVisible = true
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "queryFileLink",
        "content": {
          "ownertable": 'sat_notice',
          "ownerid": this.form.sat_noticeid,
          "usetype": 'cover'//传空返回有所
        }
      })
      console.log("封面信息")
      console.log(res)
      this.image = res.data[0]
      console.log("获取封面")
      console.log(this.image)
      /*res.data[0] ? this.image = res.data[0].url : this.image = { url: '' }*/
    },
    onCoverSubmit(res) {
      this.form.cover = JSON.parse(res.attinfos).data[0].url
      this.image = JSON.parse(res.attinfos).data[0]
    },
    clearCover() {
      this.form.cover = null
      this.image = {}
    },
    // 获取保存授权范围数据
    onChecked(param) {
      this.authData = param
    },
    // 新增授权范围
    async insertCoursewareauth() {
      const res = await this.$api.requested({
        // "classname": "webmanage.saletool.notice.noticeauth",
        // "method": "createNoticeAuth",
        "id":20221101142003,
        "content": this.authData
      })
      console.log("新增")
      res.code === 0 ? this.$notify({
        title: '失败',
        message: res.data,
        type: 'error'
      }) : ''
    },
    // 查询授权信息
    async query_auth() {
      const res = await this.$api.requested({
        "id":20221101142303,
        "content": {
          "sat_noticeid": this.id,
        }
      })
      console.log("查询授权")
      this.defaultData = res.data
    },
    onshow(){
      this.$router.replace({path:'notice_mag_list',query:{id:this.id}})
      this.queryNoticeMain()
      this.query_auth()
      this.edit = true
      this.save = false
    },
    onEdit(){
      this.edit = false
      this.save = true
    },
    handleCommand(command){
      console.log(command)
      if (command === 'analysis'){
        this.dataAnalysis()
      }else if(command === 'release'){

      }
    },
    dataAnalysis(){
      console.log("数据分析")
      this.$router.push({path:'notice_analysis',query:{id:this.id}})
    },
    onSuccess(){
      this.drawer = false
      this.$emit("updateSuccess")
    },
    onClose(){
      this.save = false
      this.edit = true
    }
  },
  mounted() {
    this.status = false
  }
}

</script>
<style>
.detail__panel{
  background:#f1f2f3;
  overflow-y: scroll;
  font-size: 14px;
  color:#666;
  height:100vh;
}
</style>