dm-manage-web/src/views/zs/components/distributeForm.vue

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span="24">
        <el-form-item label="线下接待人员" prop="offlineReceiver">
          <el-input v-if="form.offlineReceiverName" v-model="form.offlineReceiverName" disabled />+
          <el-select v-model="form.offlineReceiver" multiple filterable placeholder="请选择" style="width: 97%; padding-top: 5px">
            <el-option
              v-for="dict in options.userOptions.filter((item) => !options.offlineReceiver || !options.offlineReceiver.includes(item.id))"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="memo">
          <el-input v-model="form.memo" type="textarea" :rows="4" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-if="distributeRecord != undefined && distributeRecord.length > 0" :span="24">
        <el-form-item label="甩单记录">
          <el-timeline style="max-height: 260px; overflow-y: auto">
            <el-timeline-item
              v-for="item in distributeRecord"
              :key="item.record"
              :timestamp="item.operateTime"
              placement="top"
              style="padding: 5px !important"
            >
              <el-card>
                <span style="display: block; font-weight: bold; font-size: 13px">用户 {{ item.operateUserName }}</span>
                <span style="display: block; padding-left: 10px; font-size: 13px" v-html="item.centent" />
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDistributeRecord } from '@/api/zs/clue';
export default {
  name: 'DistributeForm',
  model: {
    prop: 'info',
    event: 'update'
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Object,
      default: () => ({
        userOptions: [],
        offlineReceiver: []
      })
    }
  },
  data() {
    return {
      form: JSON.parse(JSON.stringify(this.info)),
      rules: {
        offlineReceiver: {
          required: true,
          message: '线下接待人员不为空',
          trigger: 'change'
        }
      },
      distributeRecord: []
    };
  },
  watch: {
    form: {
      handler(val) {
        this.$emit('update', val);
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.handleDistribute();
  },
  methods: {
    validate() {
      return this.$refs.form.validate();
    },
    handleDistribute() {
      // 甩单
      getDistributeRecord({ clueId: this.form.clueId }).then((resp) => {
        if (resp.code === 200) {
          this.distributeRecord = resp.data;
        }
      });
    }
  }
};
</script>