crm_front_v3/src/views/dataReport_manage/components/ContractDia.vue

<script setup>
import { dataMainInterface } from '@/api/api.js'
import { watch, ref } from 'vue'
import { formatTime } from '@/utils/date'

const props = defineProps({
  isOpenDia: {
    type: Boolean,
  },
  item: {
    type: Object,
  },
  date: {
    type: String
  }
})
const emits = defineEmits(['cancel'])

watch(
  () => props.item,
  (nval) => {
    if (nval.selectType === '系统合同/上传附件') {
      getContractDetailList()
    } else {
      getContractList();
    }
  }
)

const contractList = ref([])
const perssionList = ref([])
/* 获取合同列表 */
function getContractList() {
  dataMainInterface.companyContractList({
    CompanyId: props.item.CompanyId,
    EndDate: props.date,
    PageSize: 40,
    CurrentIndex: 1
  }).then(res => {
    if (res.Ret === 200) {
      contractList.value = res.Data.List
    }
  })
}

function getContractDetailList() {
  dataMainInterface.companyContractDetailList({
    CompanyContractId: props.item.CompanyContractId,
    ContractId: props.item.ContractId
  }).then(res => {
    if (res.Ret === 200) {
      contractList.value = res.Data.List
    }
  })
}

function cancelHandle() {
  emits('cancel')
}
/* 打开权限 */
function openDia(row) {
  perssionList.value = row.PermissionList;
}

</script>

<template>
  <el-dialog
    :model-value="props.isOpenDia"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    class="contractDialog-dia"
    center
    :title="props.item.CompanyName"
    width="55%"
  >
    <div class="dialog-cont">
      <el-table :data="contractList" ref="authTable" border height="300">
        <el-table-column label="合同编号" align="center">
          <template #default="scope">{{ scope.row.ContractCode }}</template>
        </el-table-column>
        <el-table-column label="合同金额" align="center">
          <template #default="scope">{{ scope.row.Money }}</template>
        </el-table-column>
        <el-table-column label="付款方式" align="center">
          <template #default="scope">{{ scope.row.PayMethod }}</template>
        </el-table-column>
        <el-table-column label="付款渠道" align="center">
          <template #default="scope">{{ scope.row.PayChannel }}</template>
        </el-table-column>
        <el-table-column label="服务期限" align="center">
          <template #default="scope">{{
            formatTime(scope.row.StartDate + "~" + scope.row.EndDate)
          }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-popover placement="right" width="400" trigger="click">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  font-size: 16px;
                "
              >
                <h3>查看权限</h3>
                <!-- <i class="el-icon-close" style="font-size:20px"></i> -->
              </div>
              <ul style="margin-top: 20px">
                <li
                  style="
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                  "
                  v-for="auth in perssionList"
                  :key="auth.ClassifyName"
                >
                  <span style="color: #409eff; margin-right: 10px"
                    >{{ auth.ClassifyName }}:</span
                  >
                  <template
                    v-for="sub_auth in auth.PermissionList"
                    :key="sub_auth.ChartPermissionId"
                  >
                    <el-tag size="mini" style="margin: 5px 8px">
                      {{ sub_auth.ChartPermissionName }}
                    </el-tag>
                  </template>
                </li>
              </ul>
              <template #reference>
                <span class="editsty" @click="openDia(scope.row)"
                  >查看权限详情</span
                >
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bot_dia">
      <el-button type="primary" @click="cancelHandle">关闭</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.contractDialog-dia {
  .el-dialog__header {
    background: #fff !important;
  }
  .el-dialog__title {
    color: #333 !important;
  }
  .el-dialog__close {
    color: #909399 !important;
  }
  .bot_dia {
    display: flex;
    justify-content: center;
    margin: 30px 0 20px;
  }
}
</style>