green-valley-admin/src/components/Development/DevelopmentDate.vue

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

        <!-- 图片 -->
        <template slot="visitLocation" slot-scope="text, record">
          <img :src="record.visitLocation" width="50" height="50">
        </template>

        <!-- 说明图片 -->
        <template slot="introductionPicture" slot-scope="text, record">
          <img :src="record.introductionPicture" class="img" />
          <a-modal :imgVisible="imgVisible" @cancel="imgVisible = false" footer title="身份证明">
            <img :src="record.idCardPromise" @click="imgVisible = true" style="width: 100%;" />
          </a-modal>
        </template>

        <template slot="edit" slot-scope="text, record">
          <a-icon @click="showEditModal" class="pointer" theme="twoTone" type="edit" />
          <a-popconfirm @confirm="() => onDelete(record.id)" title="确定要删除这一条?" v-if="lists.length">
            <a-icon class="ml-4 pointer" theme="twoTone" two-tone-color="#ff0000" type="delete" />
          </a-popconfirm>
        </template>
      </a-table>
    </div>
    <a-empty v-else />

    <!-- 编辑 -->
    <development-edit :editVisible="editVisible" @closeModal="closeModal" />
  </div>
</template>

<script>
import DevelopmentEdit from "components/Development/DevelopmentEdit.vue";
import { selResDelete } from 'config/api';

const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id',
    width: '7%',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '编号',
    align: 'center',
    dataIndex: 'identifier',
    key: 'identifier',
  },
  {
    title: '成果名称',
    align: 'center',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '图片',
    align: 'center',
    dataIndex: 'visitLocation',
    key: 'visitLocation',
    scopedSlots: { customRender: 'visitLocation' },
  },
  {
    title: '编辑',
    align: 'center',
    dataIndex: 'edit',
    key: 'edit',
    scopedSlots: { customRender: 'edit' },
  },
];

// const lists = [
//   {
//     id:'001',
//     directory:'传控科技',
//     introductionPicture:'assets/logo.png',
//   },
//   {
//     id:'002',
//     directory:'中绿环保',
//     introductionPicture:'assets/logo.png',
//   }
// ];

export default {
  name: "DevelopmentDate",
  components: {
    DevelopmentEdit,
  },

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

  data() {
    return {
      columns,
      loading: false,
      height: '',
      editVisible: false,
      imgVisible: false,
    }
  },

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

  methods: {
    showEditModal(){
      this.editVisible = true;
    },

    async closeModal(){
      this.editVisible = false;
      await this.$emit('selResSearch');
    },

    // 删除
    async onDelete(id) {
        console.log(id);
      try {
        const params = { param: { id } };
        const res = await selResDelete(params);
        const { data, msg, code } = res.data;
        if (code === 200) {
          this.$message.success('删除成功');
          this.$emit('selResSearch');
          // const arr = [...this.lists];
          // this.lists = arr.filter(item => item.id !== teamId);
          // TODO: 填到列表中
        } else {
          throw msg;
        }
      } catch (error) {
        this.$message.error(error || '删除失败');
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.main .img {
  width: 100%;
}

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