exhibition_service_admin/src/aiHelper/plugin/seoPlugin/components/editColumn.vue

<template>
  <div v-loading="loading" class="edit_table_column">
    <el-input v-show="edit" v-model="scope.row[prop]" type="textarea" :rows="6" />
    <div v-show="!edit" class="content" :title="scope.row[prop]" v-html="scope.row[prop]" />
    <el-button v-show="!edit" size="mini" icon="el-icon-edit" @click="editSeoTableColumnEvent(scope,'edit')" />
    <el-button v-show="edit" type="primary" size="mini" icon="el-icon-check" @click="editSeoTableColumnEvent(scope,'save')" />
    <div v-if="prop === 'seo_title' && scope.row[prop]" class="limit_tips">
      (<span v-if="word>66" style="color: red">{{ word }}</span><span v-else>{{ word }}</span>/66)
    </div>
    <div v-else-if="prop === 'seo_describe' && scope.row[prop]" class="limit_tips">
      (<span v-if="word>250" style="color: red">{{ word }}</span><span v-else>{{ word }}</span>/250)
    </div>
    <div v-else class="limit_tips" />
  </div>
</template>

<script>
import { updateSEO } from '@/api/system'
import Vue from 'vue'
export default Vue.extend({
  name: 'EditColumn',
  props: {
    prop: {
      default: '',
      type: String
    },
    scope: {
      default: null,
      type: Object
    }
  },
  data() {
    return {
      loading: false,
      edit: false
    }
  },
  computed: {
    word() {
      return this.scope.row[this.prop].replace(/[^\x00-\xff]/g, '01').length
    }
  },
  methods: {
    editSeoTableColumnEvent(scope, type) {
      if (type === 'edit') {
        this.edit = true
      } else {
        this.loading = true
        this.$emit('loadingEvent', true)
        updateSEO({
          id: scope.row.seo_id ? scope.row.seo_id : scope.row.id,
          seo_title: scope.row.seo_title,
          seo_keyword: scope.row.seo_keyword,
          seo_describe: scope.row.seo_describe
        }).then(() => {
          this.edit = false
          this.loading = false
          this.$emit('save', scope)
          this.$emit('loadingEvent', false)
        })
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.edit_table_column {
  position: relative;
  .limit_tips {
    height: 32px;
    width: 100%;
    display: block;
  }
  .content {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    word-break: break-word;
  }
  .el-button {
    opacity: 0;
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:hover {
    .el-button {
      opacity: 1;
    }
  }
}
</style>