eta_front/src/components/todo/roadShowFeedbackDia.vue

<template>
<div>
	<el-dialog 
    width="70%" 
    top="5vh" 
    class="feedback-dialog"
    :visible.sync="isShow" 
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    v-dialogDrag
  >
    <div slot="title">
      <span style="position:relative;top:-2px">{{title}}</span>
    </div>
    <div class="container">
      <el-table
        :data="feedbackList"
        height="60vh"
        v-loading="tableLoading"
        :element-loading-text="$t('Table.data_loading')"  
        style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);margin-top:20px;"
        border
      >
        <el-table-column
          v-for="item in tableColums"
          :key="item.label"
          :label="item.label"
          :width="item.widthsty"
          :min-width="item.minwidthsty"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="item.key === 'time'">
              {{
                row.StartDate === row.EndDate
                ? ($moment(row.StartDate + " " + row.StartTime).format(
                  "MM.DD(ddd) HH:mm") + '~' +  $moment(row.EndDate + " " + row.EndTime).format("HH:mm"))
                : (
                  $moment(row.StartDate + " " + row.StartTime).format(
                  "MM.DD(ddd) HH:mm") + '~' + $moment(row.EndDate + " " + row.EndTime).format("MM.DD(ddd) HH:mm")
                )
              }}
            </span>

            <!-- 活动形式 -->
            <span v-else-if="item.key === 'RoadshowType'">
              {{row.RoadshowType}} {{ row.RoadshowType === '线上' ? `(${row.RoadshowPlatform}  )` : `(${row.Province}${row.City})`}}
            </span>

            <!-- 客户拼接 -->
            <span v-else-if="item.key === 'company'">
              {{ row.CompanyName + (row.CompanyStatus ? `(${row.CompanyStatus})` : '') }}
            </span>

            <span v-else-if="item.key === 'action'" @click="writeFeedBackHandle(row)" class="editsty">
              {{row.FeedbackContent ? '修改' : '填写反馈'}}
            </span>

            <span v-else>{{ row[item.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-button type="primary" @click="submitHandle">提交</el-button>
      </div>
    </div>

  </el-dialog>

  <!-- 填写反馈 -->
  <el-dialog
    :visible.sync="feedbackData.isShow"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="600px"
    @close="closeDia"
    v-dialogDrag
  >
    <div slot="title">
      <span> {{feedbackData.content ? '修改' : '填写反馈'}}</span>
    </div>
    <div>
      <el-input type="textarea" v-model.trim="feedbackData.content" :autosize="{ minRows: 8, maxRows: 12}" placeholder="请填写反馈内容" resize="none"></el-input>
      <div class="bottom">
        <el-button type="primary" style="margin-right:30px" plain @click="closeDia">取消</el-button>
        <el-button type="primary" @click="submitFeedbackContent">确定</el-button>
      </div>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { roadshowInterence } from '@/api/api.js';
export default {
	props: {
    isShow: {
      type: Boolean,
      required: true
    },
    data: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: '请提交路演反馈'
    }
  },
	data() {
		return {
      feedbackList: [],
      tableColums:[
				{
					label: '活动时间',
					key: 'time',
					widthsty: '200px',
				},
				{
					label: '活动类型',
					key: 'ActivityType'
				},
				{
					label: '活动形式',
					key: 'RoadshowType'
				},
				{
					label: '客户名称',
					key: 'company'
				},
				{
					label: '研究员',
					key: 'ResearcherName',
					widthsty: '100px',
				},
				{
					label: '操作',
					key: 'action'
				},
			],//列
      feedbackData: {
        isShow: false,
        id: '',
        content: ''
      }
    }
	},
  watch: {
    data(newval) {
      this.feedbackList = newval;
    }
  },
	methods: {
    /* 提交 */
    submitHandle() {

      let have_empty = this.feedbackList.some(_ => !_.FeedbackContent);
      if(have_empty) return this.$message.warning('有未填写反馈内容的路演，提交失败');

      let params = {
        List: this.feedbackList.map(item => ({ RsCalendarResearcherId: item.RsCalendarResearcherId }))
      }  

      roadshowInterence.submitFeedback(params).then((res) => {
        if(res.Ret !== 200 ) return

        this.$message.success('提交成功')
        this.$emit('update:isShow',false)
      })
    },

    /* 填写反馈 or修改 */
    writeFeedBackHandle({ FeedbackContent,RsCalendarResearcherId }) {
      this.feedbackData = {
        isShow: true,
        id: RsCalendarResearcherId,
        content: FeedbackContent
      }
    },

    /* 提交反馈内容 */
    submitFeedbackContent() {
      const { content,id } = this.feedbackData;
      if(!content) return this.$message.warning('内容不能为空')

      roadshowInterence.writeFeedback({
        RsCalendarResearcherId: id,
        FeedbackContent: content
      }).then(res => {
        if(res.Ret !== 200) return

        this.$message.success('填写成功')
        this.closeDia();
        // this.$parent.getSellerFeedBackList();
        const list_item = this.feedbackList.find(_ => _.RsCalendarResearcherId === id);
        list_item.FeedbackContent = content;
      })
    },

    closeDia() {
      this.feedbackData = {
        isShow: false,
        id: 0,
        content: ''
      }
    }
  },
	created() {},
	mounted() {},
}
</script>
<style lang="scss" scoped>
  .bottom {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    .el-button {
      width: 150px;
    }
  }
</style>