company.vue

<template>
  <div class="white_bg burt-container">
    <div class="flex title-div">
      <span>保险公司信息</span>
      <a-button type="primary" @click.stop="addCompany">新建保险公司</a-button>
    </div>
    <a-table :columns="columns" :data-source="dataList" :scroll="{ x: 'max-content' }" :pagination="false">
        <template slot='operation' slot-scope="text, record, index">
          <a-button type="link" @click.stop="editEvt(record)">修改</a-button>
          <a-button type="link" class="success" @click.stop="detailEvt(record)">查看</a-button>
          <a-button type="link" class="danger" @click.stop="delRecord(index)">删除</a-button>
        </template>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pagination" @pageChange="getData" />
    <a-modal  :title="editFormObj.id ? '编辑' : '新增'" :visible="dialogShow" width="60%" :maskClosable="false"
      okText="确定" cancelText="取消"
      @ok="handleEditOK"
      @cancel="dialogShow = false">
      <a-form-model layout="vertical" ref="editForm" :model="editFormObj" :rules="editRules">
        <a-row :gutter="30">
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="公司名称" prop="longName">
              <a-input v-model.trim="editFormObj.longName" placeholder="保险公司名称" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="公司英文名" prop="englishName">
              <a-input v-model.trim="editFormObj.englishName" placeholder="保险医生英文名" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="联系电话" prop="contactPhone">
              <a-input v-model.trim="editFormObj.contactPhone" placeholder="联系电话" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="联系地址" prop="address">
              <a-input v-model.trim="editFormObj.address" placeholder="联系地址" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="Protal链接" prop="portalUrl">
              <a-input v-model.trim="editFormObj.portalUrl" placeholder="Protal链接" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="联系人" prop="contactPerson">
              <a-input v-model.trim="editFormObj.contactPerson" placeholder="联系人" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";

export default {
  data() {
    const columns = [
      { title: "序号", dataIndex: "id",width: 120},
      { title: "保险公司名称",dataIndex: "longName", ellipsis: true,width: 130},
      { title: "保险公司英文名", dataIndex: "englishName",ellipsis: true,width: 105},
      { title: "联系电话", dataIndex: "contactPhone", width: 125, customRender: (val) => {
        const valArr = val && val.split(/,|\n/ig) || [];
        const valStr = valArr.join('<br />')
        return <span domPropsInnerHTML={valStr}></span>
      }},
      { title: "联系地址", dataIndex: "address", ellipsis: true, width: 180},
      { title: "Protal链接", dataIndex: "portalUrl", ellipsis: true, width: 155 },
      { title: "联系人", dataIndex: "contactPerson", ellipsis: true, width: 100},
      { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" },fixed: "right", width: "200px",align: "center"},
    ];
    return {
      dialogShow: false,
      columns,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      dataList: [],
      countyList: [],
      editFormObj: {
        id: "",
        longName: "",
        englishName: "",
        contactPhone: "",
        address: "",
        portalUrl: "",
        contactPerson: "",
      },
      editRules: {
        longName: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  components: {
    BurtPagination,
  },
  created() {
    this.getData();
    this.getRefcdByRefgrp();
  },
  methods: {
    // 获取国家列表
    getRefcdByRefgrp() {
      this.$apis.GETREFCDBYREFGRP({
        modid: "CI",
        refgrp: "COUNTRY_MAPPING"
      }).then((res) => {
        this.countyList = res.content || [];
      });
    },
    //获取列表
    getData() {
      this.$apis
        .PAYORLIST({
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
        })
        .then((res) => {
          if (res.returnCode == "0000") {
            let content = res.content || {};
            this.pagination.total = content.total || 0;
            this.dataList = content.list || [];
          } else {
            this.$message.error(res.returnMsg);
          }
        });
    },
    //新增保险公司
    addCompany(){
      this.$router.push({
        path: '/info/companyDetail'
      })
    },
    //编辑
    editEvt(record) {
      this.editFormObj = {
        id: record.id || "",
        longName: record.longName || "",
        englishName: record.englishName || "",
        contactPhone: record.contactPhone || "",
        address: record.address || "",
        portalUrl: record.portalUrl || "",
        contactPerson: record.contactPerson || ""
      };
      this.dialogShow = true;
    },
    //编辑保存
    handleEditOK(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$apis
            .PAYORUPDATE(this.editFormObj)
            .then((res) => {
              if (res.returnCode == "0000") {
                this.$message.success("编辑成功");
                this.dialogShow = false;
                this.getData();
              } else {
                this.$message.error(res.returnMsg);
              }
            });
        }
      });
    },
    //删除
    delRecord(index) {
      this.$modal.confirm({
        title: "删除",
        content: "确定删除该条记录？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          this.$apis
            .PAYORDELETE({
              id: this.dataList[index].id,
            })
            .then((res) => {
              if (res.returnCode == "0000") {
                this.$message.success("删除成功");
                this.dataList.splice(index, 1);
              } else {
                this.$message.error(res.returnMsg);
              }
            });
        },
      });
    },
    detailEvt(record){
      this.$router.push({
        path: '/info/companyDetail',
        query: {
          id: record.id
        }
      })
    },
    //查看详情
    seeDetail(record) {
      //没有编辑
      if (!record.edit) {
        this.$apis
          .PAYORDETAIL({
            id: record.id,
          })
          .then((res) => {
            if (res.returnCode == "0000") {
              console.log(res.content || {}, 1111);
            } else {
              this.$message.error(res.returnMsg);
            }
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title-div {
  line-height: 52px;
  color: #252631;
  font-weight: bold;
  justify-content: space-between;
}
</style>