wiki_platform_admin/src/components/Contact/ContactDate.vue

<template>
  <div class="main flex-1">
    <a-spin :spinning="showEdit">
      <div style="width:100%" v-if="lists && lists.length > 0">
        <a-table
          :columns="columns"
          :data-source="lists"
          :loading="loading"
          :pagination="pagination"
          :row-key="record => record.id"
          :scroll="{ y: height }"
          @change="handleTableChange"
          bordered
          class="white"
        >
          <template slot="id" slot-scope="text, record, index">
            <span>{{ index + 1 }}</span>
          </template>
           <template slot="name" slot-scope="text, record">
            <div>{{ record.name }}</div>
          </template>

          <template slot="residence" slot-scope="text, record">
            <div>{{ record.address }}</div>
          </template>
          <template slot="birth" slot-scope="text, record">
            <div> 
              {{ $moment(+record.birthday*1000).format('YYYY-MM-DD') }}
            </div>
            <!-- <div>{{ record.birthday }}</div> -->
          </template>
          <template slot="account" slot-scope="text, record">
            <div>{{ record.birthdayPlace }}</div>
          </template>
          <template slot="eduExperience" slot-scope="text, record">
            <div>{{ record.eduExperience }}</div>
          </template>

        
          <template slot="workExperience" slot-scope="text, record">
            <div>{{ record.jobExpirence }}</div>
          </template>

          <template slot="phone" slot-scope="text, record">
            <div>{{ record.phone }}</div>
          </template>


          <template slot="jobIntension" slot-scope="text, record">
            <div>{{ record.jobWilling }}</div>
          </template>

          <template slot="edit" slot-scope="text, record">
            <!-- <a-icon @click="showEditModal(record)" class="pointer" theme="twoTone" type="edit" /> -->
            
            <a-switch 
              style="padding:0px"
              @change="joinUsStatus($event,record.id)" checked-children="已审核" 
              default-un-checked un-checked-children="未审核" 
              />
            <a-popconfirm
              @confirm="() => onDelete(record.id)"
              title="确定要删除这一条?"
              v-if="lists.length"
            >
              <a-icon class="ml-2 pointer" theme="twoTone" two-tone-color="#ff0000" type="delete" />
            </a-popconfirm>
          </template>

         
        </a-table>
      </div>
      <a-empty v-else />
      <!-- <div>{{ editItem }}</div> -->

      <!-- 编辑 -->
      <contact-edit
        :edit-item="editItem"
        :edit-visible="editVisible"
        :type-lists="typeLists"
        @closeModal="closeModal"
        @selInstrumentSearch="selInstrumentSearch"
      />
    </a-spin>
  </div>
</template>

<script>
import ContactEdit from 'components/Contact/ContactEdit.vue';
import { deleteJoinUs, joinUsStatus } from 'config/api';

const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id',
    width: '7%',
    scopedSlots: { customRender: 'id' },
  },
   {
    title: '名字',
    align: 'center',
    dataIndex: 'name',
    key: 'name',
    width: '7%',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '现居住地',
    align: 'center',
    dataIndex: 'residence',
    key: 'residence',
    scopedSlots: { customRender: 'residence' },
  },
  {
    title: '出生年月',
    align: 'center',
    dataIndex: 'birth',
    key: 'birth',
    scopedSlots: { customRender: 'birth' }
  },
  {
    title: '户口所在地',
    align: 'center',
    dataIndex: 'account',
    key: 'account',
    scopedSlots: { customRender: 'account' }
  },
  {
    title: '教育经历',
    align: 'center',
    dataIndex: 'eduExperience',
    key: 'eduExperience',
    scopedSlots: { customRender: 'eduExperience' },
  },
  {
    title: '电子邮件',
    align: 'center',
    dataIndex: 'email',
    key: 'email',
    scopedSlots: { customRender: 'email' },
  },
  {
    title: '工作经历',
    align: 'center',
    dataIndex: 'workExperience',
    key: 'workExperience',
    scopedSlots: { customRender: 'workExperience' },
  },
  {
    title: '手机号',
    align: 'center',
    dataIndex: 'phone',
    key: 'phone',
    scopedSlots: { customRender: 'phone' },
  },
	{
    title: '求职意向',
    align: 'center',
    dataIndex: 'jobIntension',
    key: 'jobIntension',
    scopedSlots: { customRender: 'jobIntension' },
  },
  // {
  //   title: '审核',
  //   align: 'center',
  //   dataIndex: 'shenhe',
  //   key: 'shenhe',
  //   scopedSlots: { customRender: 'shenhe' },
  // },
   {
    title: '编辑',
    align: 'center',
    dataIndex: 'edit',
    width: '130px',
    key: 'edit',
    scopedSlots: { customRender: 'edit' },
  },
];

export default {
  name: 'TransferDate',
  components: {ContactEdit,},

  props: {
    lists: { type: Array, default: () => [] },
    pagination: { type: Object, default: () => {} },
    typeLists: { type: Array, default: () => [] },
  },

  data() {
    return {
      columns,
      loading: false,
      height: '',
      editVisible: false,
      imgVisible: false,
      spinning: false,
      editItem: null, // 修改的那条
      showEdit: false,
    };
  },

  mounted() {
    let th = 250;
    let wh = window.innerHeight;
    this.height = wh - th;
    window.onresize = () => {
      return (() => {
        wh = window.innerHeight;
        this.height = wh - th;
      })();
    };
  },

  methods: {
    async joinUsStatus(e,id){
      if(e === true){
        const params = { param: { id, dealStatus: 1 } };
        await joinUsStatus(params);
      }else if(e === false){
        const params2 = { param: { id, dealStatus: 0 } };
        await joinUsStatus(params2);
      }

      // 

    },
    async showEditModal(record) {
      console.log(record)
      this.showEdit = true;
      await this.getDetail(true, record);
      this.showEdit = false;
      this.editVisible = true;
      // this.editItem = record;
      console.log('==============>showEditModal结束')
    },

    closeModal() {
      this.editVisible = false;
    },

    async selInstrumentSearch() {
      await this.$emit('contactUsSearch');
    },

    handleTableChange(pagination) {
      const { current, pageSize } = pagination;
      const condition = { current, pageSize };
      this.$emit('contactUsSearch', condition);
    },

    // 详情查询
    async getDetail(expanded, record) {
      if (!expanded) return;
      try {
        this.spinning = true;
        // const params = { param: { id: record.id } };

        // const { data, msg, code } = res.data;
        // this.spinning = false;
        // if (code === 200) {
        const item = this.lists.find(item => item.id === record.id);
        this.editItem = item  
        // } else {
        //   throw msg;
        // }
      } catch (error) {
        this.$message.error(error || '查询失败');
      }
    },

    // 删除
    async onDelete(id) {
      try {
        const params = { param: { id } };
        const res = await deleteJoinUs(params);
        const { data, msg, code } = res.data;
        if (code === 200) {
          this.$message.success('删除成功');
          this.$emit('contactUsSearch');
        } else {
          throw msg;
        }
      } catch (error) {
        this.$message.error(error || '删除失败');
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.main .img {
  height: 65px;
}

.main .big_img {
  width: 200px;
}
</style>