boss/pages/main/index/kaifawu_contact.vue

<template>
  <section id="dev_check">
    <el-select v-model="value" @change="changeSelect" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <section class="table">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="providerTitle" label="解决方案">
          <template slot-scope="scope">
            <span class="lblue point">
              <nuxt-link
                target="_blank"
                :to="{path:'/main/solution_detail?id='+scope.row.providerId}"
              >{{ scope.row.providerTitle }}</nuxt-link>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="用户" width="66">
          <template slot-scope="scope">
            <span v-if="scope.row.uid == 0">来宾用户</span>
            <span class="lblue point" @click="clickDev(scope.row.uid)" v-else>{{ scope.row.uid }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="contactCreatedAtFormat" label="创建时间"></el-table-column>
        <el-table-column prop="channel" label="渠道">
          <template slot-scope="scope">{{ scope.row.channel }} {{ scope.row.channelVersion }}</template>
        </el-table-column>
        <el-table-column prop="platformContactNote" label="历史备注"></el-table-column>
        <el-table-column prop="platformContactNote" label="备注" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="onToList(scope.row)">查看备注({{scope.row.remark_num}})</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="platformContactAtFormat" label="联系时间"></el-table-column>
        <el-table-column prop="platformContact" label="当前状态">
          <template slot-scope="scope">
            <p v-if="scope.row.platformContact == 0">未联系</p>
            <p v-else>已联系</p>
          </template>
        </el-table-column>

        <el-table-column prop="platformContactAdmin.nickname" label="操作人"></el-table-column>

        <el-table-column label="操作" prop="platformContact" width="200">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.platformContact == 0" @click="onContact(scope.row)">确认联系</el-button>
            <el-button type="text" @click="showConfirm(scope.row)">添加备注</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <el-pagination
      background
      @current-change="changePagination"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
    ></el-pagination>

    <el-dialog title="确认联系" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="roleForm">
        <el-form-item label="备注" label-width="120px">
          <el-input v-model="form.content" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm('roleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 列表数据
      tableData: [],
      pageSize: 20,
      totalCount: 40,
      dialogFormVisible: false,
      currentPage: 1,
      form: {
        id: null,
        content: "",
        type: 2
      }
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    async onContact(row) {
      let res = await this.$post("/api/admin/kaifawu/markContact", {id: row.id});
      if (res.status == 1) {
        this.$message({
          message: res.info,
          type: "success"
        });
        this.getTableData();
      } else {
        this.$message({
          message: res.info,
          type: "fail"
        });
      }
    },
    showConfirm(row) {
      if (row.platformContact == 0) {
        this.$message({
          message: '请先联系，在备注',
          type: "fail"
        });
        return false;
      }
      this.form.id = row.id;
      this.dialogFormVisible = true;
    },
    // 页码变动
    changePagination(page) {
      this.currentPage = page;
      this.getTableData();
    },
    // 点击开发者
    clickDev(uid) {
      window.open(
        this.$store.state.domainConfig.siteUrl + `/rooter/user/${uid}`
      );
    },
    async confirm() {
      let res = await this.$post("/api/admin/kaifawu/remark", this.form);
      if (res.status == 1) {
        this.$message({
          message: res.info,
          type: "success"
        });
        this.getTableData();
        this.dialogFormVisible = false;
      }
    },
    onToList(row) {
      let data = {
        obj_id: row.id,
        type: 2
      }
      this.$router.push({path: '/main/remark_list', query: data});
    },
    // 获取列表数据
    async getTableData() {
      this.tableData = [];
      let page = this.currentPage;
      let body = {page};
      let res = await this.$post("/api/admin/kaifawu/getContactList", body);
      let data = res.data;
      this.tableData = data.lists;
      this.pageSize = data.pageSize;
      this.totalCount = Number(data.total);
    }
  }
};
</script>

<style scoped>
.table {
  height: calc(100% - 60px);
}

.img {
  width: 100%;
  height: auto;
}
</style>