FE_IASF_server/src/components/modules/history.vue

<template>
  <!-- sfel-概况-发展历程 or 产业光源-概况-大事记 -->
  <div>
    <el-dialog title="编辑内容"
               :visible.sync="visible"
               width="70%"
               custom-class="module"
               :close-on-click-modal="false"
               :before-close="close">
      <el-table class="module-table"
                :data="list"
                header-align="center"
                row-key="id">
        <el-table-column type="index"
                         width="60"
                         label="序号"
                         align="center"></el-table-column>
        <el-table-column label="图片"
                         min-width="140"
                         align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.pic"
                 :src="scope.row.pic"
                 class="upload-pic">
            <div class="upload-none"
                 v-else>
              <i class="el-icon-picture-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title"
                         label="标题"
                         min-width="140"
                         align="center"></el-table-column>
        <el-table-column label="链接"
                         min-width="140"
                         align="center">
          <template slot-scope="scope">
            <div class="link-wrap">
              <span>{{ scope.row.link.linkName }}</span>
              <el-button v-if="data.type === 'banner'"
                         class="set-link"
                         type="primary"
                         size="mini"
                         @click="toLink(scope.row, scope.$index)">设置链接</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="des"
                         label="描述"
                         min-width="240"
                         align="center"></el-table-column>
        <el-table-column label="操作"
                         width="100"
                         align="center">
          <template slot-scope="scope">
            <div class="flex a-center">
              <el-switch v-model="scope.row.isEnable"
                         :active-value="1"
                         :inactive-value="0">
              </el-switch>
              <i class="el-icon-edit-outline del"
                 @click="editHistory(scope.row, scope.$index)"></i>
              <i class="el-icon-delete del"
                 @click="delRow(data.list, scope.$index)"></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="!data.disableAdd"
           class="plus">
        <i class="el-icon-circle-plus-outline"
           @click="editHistory(data.originForm, -1)"></i>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">取消</el-button>
        <el-button type="primary"
                   @click="historySubmit">确定</el-button>
      </span>
    </el-dialog>

    <Content :data.sync="data"
             :visible.sync="contentVisible"
             @contentSubmit="contentSubmit" />
  </div>
</template>

<script>
import Setting from '@/setting'
import Util from '@/libs/util'
import Content from '@/components/modules/content'
export default {
  props: ['data', 'visible', 'list'],
  components: {
    Content
  },
  data () {
    return {
      rules: {},
      linkVisible: false,
      linkForm: {},
      curIndex: 0,
      cropperModel: false,
      isUpload: false,
      file: {}, // 当前被选择的图片文件
      fileId: '',
      curForm: {},
      contentVisible: false,
      curModule: 0,
      curData: {},
    };
  },
  mounted () {

  },
  methods: {
    // 添加行
    addRow () {
      this.editHistory(this.data.originForm, -1)
    },
    // 编辑内容
    editHistory (row, i = 0) {
      this.data.form = JSON.parse(JSON.stringify(row))
      this.curModule = i
      this.contentVisible = true
    },
    close () {
      this.$emit('update:visible', false)
    },
    // 模块设置提交
    contentSubmit () {
      this.contentVisible = false
      const { form } = this.data
      if (this.curModule === -1) {
        this.list.push(JSON.parse(JSON.stringify(this.data.form)))
      } else {
        const list = this.list[this.curModule]
        for (const i in form) {
          this.$set(list, i, form[i])
        }
      }
      this.data.form = JSON.parse(JSON.stringify(this.data.originForm))
    },
    // 模块设置提交
    historySubmit () {
      this.$emit('historySubmit')
    },
  }
};
</script>
<style lang="scss" scoped>
.radio-wrap {
    display: flex;
    align-items: center;
    .el-input {
        width: 200px;
        margin-left: -40px;
    }
}
</style>