green-valley-admin/src/components/EntityApply/EntityApplyDate.vue

<template>
  <div class="main flex-1 flex-column">
    <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"
        @change="handleTableChange"
        :scroll="{ y: height }"
        bordered
        class="white"
      >
        <template slot="id" slot-scope="text, record, index">
          <span>{{ index + 1 }}</span>
        </template>

        <!-- 需求类型 -->
        <template slot="demandType" slot-scope="text, record">
          <a-tag color="green">{{ record.demandType }}</a-tag>
        </template>

        <!-- 提交时间 -->
        <template slot="submissionTime" slot-scope="text, record">{{ record.submissionTime }}</template>

        <!-- 处理状态 -->
        <template slot="processingStatus" slot-scope="text, record, index">
          <div class="editable-cell d-flex flex-nowrap">
            <a-badge status="success" />
            <editable-cell-select :arr="status" :text="record.processingStatus" @change="onCellChange(index, 'processingStatus', $event)" />
          </div>
        </template>

        <template slot="dealStatus" slot-scope="text, record">
          <a-tag :color="record.dealStatus === 2 ? 'green' : record.dealStatus === 1 ? 'red' : 'blue'">{{
            record.dealStatus === 2 ? '已通过' : record.dealStatus === 1 ? '未通过' : '审核中'
          }}</a-tag>
        </template>

        <!-- 操作 -->
        <template slot="edit" slot-scope="text, record">
          <a-icon @click="showEditModal(record)" class="pointer" theme="twoTone" type="edit" />
          <a-button @click="handleApply(record.id, 2)" class="ml-3" size="small" type="primary" v-if="record.dealStatus === 1"
            >通过</a-button
          >
          <a-button @click="handleApply(record.id, 1)" class="ml-3" size="small" type="danger" v-if="record.dealStatus === 2"
            >不通过</a-button
          >
          <a-popconfirm @confirm="() => deleteEditModal(record.id)" title="确定要删除这一条?">           
            <a-icon class="pointer ml-3" theme="twoTone" type="close-circle" />
          </a-popconfirm>
         
        </template>

        <div class="d-flex flex-nowrap justify-space-between" slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <detail :record="record" />
        </div>
      </a-table>
    </div>
    <a-empty v-else />


    <!-- 编辑 -->
    <!-- EntityApplyEdit -->
    <entity-apply-edit
      :editData="editData"
      :editVisible="editVisible"
      @closeModal="closeModal"
    />

  </div>
</template>

<script>
import EditableCellSelect from 'components/EditableCellSelect/EditableCellSelect.vue';
import EntityApplyEdit from 'components/EntityApply/EntityApplyEdit.vue';
import Detail from 'components/EntityApply/Detail.vue';
import { changeStatus,deleteCompany } from 'config/api';

const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id',
    width: '7%',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '企业名称',
    align: 'center',
    dataIndex: 'company',
    key: 'company',
  },
  {
    title: '主营业务',
    align: 'center',
    dataIndex: 'mainBusiness',
    key: 'mainBusiness',
  },
  {
    title: '联系人',
    align: 'center',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '电话',
    align: 'center',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '处理状态',
    align: 'center',
    dataIndex: 'dealStatus',
    key: 'dealStatus',
    scopedSlots: { customRender: 'dealStatus' },
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'edit',
    key: 'edit',
    scopedSlots: { customRender: 'edit' },
  },
];

export default {
  name: 'DemandDate',
  components: {
    EditableCellSelect,
    Detail,
    EntityApplyEdit
  },

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

  data() {
    return {
      columns,
      loading: false,
      height: '',
      editable: false,
      editData: '',
      editVisible: 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 deleteEditModal(id) {
      try {
        
        const params = { param: { id } };
        const res = await deleteCompany(params);
        const { data, msg, code } = res.data;
        if (code === 200) {
          this.$message.success('删除成功');
          
          this.$emit('entityApplicationSearch');


        } else {
          throw msg;
        }
      } catch (error) {
        this.$message.error(error || '删除失败');
      }
    },

    // deleteEditModal(record){
    //   console.log(record)
    // },

    showEditModal(data) {
      console.log(data);
      this.editData = data;
 
      this.editVisible = true;



    },
    closeModal() {
      this.editVisible = false;
    },
    handleTableChange(pagination) {
      const { current, pageSize } = pagination;
      const condition = { current, pageSize };
      this.$emit('entityApplicationSearch', condition);
    },
    onCellChange(key, dataIndex, value) {
      console.log('key, dataIndex, value: ', key, dataIndex, value);
      const dataSource = [...this.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dataSource = dataSource;
      }
    },

    // 审核
    async handleApply(id, dealStatus) {
      try {
        const params = { param: { id, dealStatus } };
        const res = await changeStatus(params);
        const { data, msg, code } = res.data;
        if (code === 200) {
          this.$message.success('审核成功');
          this.$emit('entityApplicationSearch');
        } else {
          throw msg;
        }
      } catch (error) {
        this.$message.error(error || '审核失败');
      }
    },
  },
};
</script>

<style scoped lang="stylus"></style>