FE_IASF_server/src/components/modules/content.vue

<template>
  <!-- 内容 -->
  <div>
    <el-dialog title="编辑内容" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close">
      <el-form ref="form" :model="data.form" :rules="rules" label-width="80px">
        <el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
          <el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入" maxlength="30"></el-input>
          <el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" maxlength="50"></el-input>
          <el-upload
            v-if="item.type === 'upload'"
            class="uploader"
            accept=".jpg,.png,.jpeg"
            :on-success="res => uploadSuccess(res, data.form)"
            :show-file-list="false"
            :action="api.upload">
              <img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
              <div class="uploader-default" v-else>
                <i class="el-icon-plus"></i>
                <p>上传图片</p>
              </div>
              <div slot="tip" class="el-upload__tip">
                <p>只支持.jpg,.png格式</p>
              </div>
          </el-upload>
          <template v-if="item.type === 'pic'">
            <img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
            <div class="uploader-default" v-else>
              <i class="el-icon-picture-outline"></i>
            </div>
          </template>
          <div v-if="item.type === 'link'" class="flex">
            <el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
            <el-button @click="toLink(data.form)">设置链接</el-button>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">取消</el-button>
        <el-button type="primary" @click="contentSubmit">确定</el-button>
      </span>
    </el-dialog>
    <Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
  </div>
</template>

<script>
import Link from '@/components/modules/link'
export default {
  props: ['data', 'visible'],
  components: {
    Link
  },
  data() {
    return {
      rules: {},
      linkVisible: false,
      linkForm: {},
      curIndex: 0,
    };
  },
  watch: {
    visible(open) {
      // 每次打开的时候处理参数
      open && this.handleForm()
    }
  },
  mounted() {
    this.handleForm()
  },
  methods: {
    // 处理form表单参数
    handleForm() {
      const { forms, type } = this.data
      // 这两张类型的模块才需要处理参数
      if (type === 'form' || type === 'introduce') {
        forms.map(e => {
          if (e.required) {
            this.rules[e.prop] = [
              {
                required: true,
                message: `请${e.type === 'input' ? '输入' : '选择'}${e.label}`,
                trigger: e.type === 'input' ? 'blur' : 'change'
              }
            ]
          }
        })
      }
    },
    close() {
      this.$emit('update:visible', false)
    },
    // 上传成功
    uploadSuccess(res, row) {
      // let url = this.form.columnBanner
      // url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
      this.$set(row, 'pic', res.url)
      // row.pic = res.url
    },
    // 展示链接设置
    toLink(row, i = 0) {
      this.linkVisible = true
      this.curIndex = i
      this.linkForm = row.link
    },
    // 链接设置提交
    linkSubmit() {
      // return console.log(3, this.$refs.link.data)
      const el = this.$refs.link
      const { data, links, article, otherLink, otherArticle } = el
      let linkEle = null
      if (data.connectionType !== 2) {
        if (data.connectionType === 1) {
          linkEle = el.$refs.links
          if (!links.length) return util.errorMsg('请选择站内链接')
          data.linkAddress = links.join()
          if (article) data.linkAddress += '-' + article
        }
        if (data.connectionType === 3) {
          linkEle = el.$refs.otherLink
          if (!otherLink.length) return util.errorMsg('请选择栏目')
          data.linkAddress = otherLink.join()
          if (otherArticle) data.linkAddress += '-' + otherArticle
        }
      }
      data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
      this.data.list[this.curIndex].link = data
      this.linkVisible = false
    },
    // 模块设置提交
    contentSubmit() {
      this.$emit('contentSubmit')
    },
  }
};
</script>
<style lang="scss" scoped>
.radio-wrap {
  display: flex;
  align-items: center;
  .el-input {
    width: 200px;
    margin-left: -40px;
  }
}
</style>