crm_front_v3/src/views/custom_manage/components/ContractInfo.vue

<script setup>
import { watch, ref } from 'vue'
import { customInterence } from '@/api/api.js'
import { CalculationDate } from '@/utils/CalculationDate'
import { ElMessage } from 'element-plus';

function formatType(e) {
  if (e === "申请转正") {
    return "试用转正式";
  } else {
    return e;
  }
}
function formatDate(e) {
  if (e === '0001-01-01T00:00:00Z') {
    return ''
  } else {
    return e.split('T')[0].replace(/-/g, '.')
  }
}
function formateYear(start, end) {
  if (start) {
    return `${CalculationDate(start, end)}`
  } else {
    return "";
  }
}

const props = defineProps({
  initData: {
    show: false
  }
})
const emits = defineEmits(['contractInfoDialogClose'])

watch(
  () => props.initData.show,
  () => {
    if (props.initData?.show) {
      init()
    }
  }
)

function handleClose(e) {
  search.value = ''
  info.value = {}
  emits('contractInfoDialogClose', e)
}

const search = ref('')
const showCustomeInfo = ref(false)
const info = ref(null)
const cusInfo = ref(null)
async function init() {
  console.log('init');
  let res = await customInterence.contractSearch({ CreditCode: props.initData.cusdata.CreditCode })
  if (res.Ret === 200) {
    if (res.Data) {
      const res2 = await customInterence.sysContractDetail({ ContractId: res.Data[0].ContractId })
      if (res2.Ret === 200) {
        info.value = res2.Data
        info.value.PermissionList = res2.Data.PermissionList.filter(item => {
          return item.CheckList.length > 0
        })
      }
    }
  }

  // 获取客户详情
  let cus = await customInterence.customDetail({ CompanyId: props.initData.cusdata.CompanyId })
  if (cus.Ret === 200) {
    if (cus.Data.CreateAuth === 1) {
      cusInfo.value = { Item: cus.Data.Item, info: cus.Data.FiccItem }
    } else {
      cusInfo.value = { Item: cus.Data.Item, info: cus.Data.RaiItem }
    }
  }
}

async function handleSearchResult(queryString, cb) {
  cb([])
  let res = await customInterence.contractSearch({ Keyword: queryString })
  if (res.Ret === 200 && res.Data) {
    cb(res.Data)
  }
}

async function handleSelect(e) {
  search.value = e.CompanyName
  const res = await customInterence.sysContractDetail({ ContractId: e.ContractId })
  if (res.Ret === 200) {
    info.value = res.Data
    info.value.PermissionList = res.Data.PermissionList.filter(item => {
      return item.CheckList.length > 0
    })
  }
}

function handlePreviewContract() {
  const url = info.value.ContractDetail.CheckBackFileUrl
  if (!url) {
    ElMessage.warning('文件错误')
    return
  }
  const reg = /\.(pdf)$/;
  // pdf
  if (reg.test(url)) {
    window.open(url, '_blank');
  } else {
    window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url, '_blank');
  }
}

async function handleSubmit() {
  const res = await customInterence.sysCustomeApply({
    CompanyApprovalId: props.initData.cusdata.CompanyApprovalId || 0,
    CompanyId: props.initData.cusdata.CompanyId,
    ContractId: info.value.ContractDetail.ContractId
  })
  if (res.Ret === 200) {
    ElMessage.success('申请成功')
    handleClose('updateList')
  }
}


</script>

<template>
  <el-dialog
    :model-value="props.initData.show"
    :modal-append-to-body="false"
    class="dialog-body-no"
    top="5vh"
    @close="handleClose"
    draggable
    width="55%"
  >
    <template #header>
      <div>
        <img
          width="15"
          src="../../../assets/img/cus_m/man.png"
          alt=""
          style="margin-right: 15px"
        /><span>{{ props.initData.type }}</span>
      </div>
    </template>
    <div class="contractinfo-wrap">
      <div class="top">
        <div>
          <span style="margin-right: 20px; color: #333"
            >申请内容：{{ formatType(props.initData.type) }}</span
          >
        </div>
        <span
          style="
            border: 1px solid #409eff;
            color: #409eff;
            padding: 2px 10px;
            border-radius: 4px;
            cursor: pointer;
          "
          @click="showCustomeInfo = true"
          >客户信息</span
        >
      </div>
      <div class="search-wrap">
        <el-autocomplete
          clearable
          v-model="search"
          :fetch-suggestions="handleSearchResult"
          placeholder="请输入公司全称搜合同"
          @select="handleSelect"
          style="width: 100%"
          prefix-icon="el-icon-search"
        >
          <template #default>
            <span
              style="margin-right: 40px; width: 450px; display: inline-block"
              >{{ scope.item.CompanyName }}</span
            >
            <span style="margin-right: 40px">{{
              scope.item.ContractType
            }}</span>
            <span style="margin-right: 40px"
              >{{ formatDate(scope.item.StartDateStr) }}~{{
                formatDate(scope.item.EndDateStr)
              }}</span
            >
            <span>{{ scope.item.Price }}元</span>
          </template>
        </el-autocomplete>
      </div>

      <div class="content">
        <div v-if="info && info.ContractDetail">
          <div class="table-wrap">
            <div class="flex">
              <div class="table-item" style="flex: 1; display: flex">
                甲方名称：{{ info.ContractDetail.CompanyName }}
                <span
                  style="
                    margin-left: 10px;
                    border: 1px solid #409eff;
                    color: #409eff;
                    padding: 2px;
                    border-radius: 4px;
                    cursor: pointer;
                    flex-shrink: 0;
                    height: 20px;
                  "
                  @click="handlePreviewContract"
                  >预览合同</span
                >
              </div>
              <div class="table-item" style="flex: 1">
                合同期限：{{ formatDate(info.ContractDetail.StartDate) }}~{{
                  formatDate(info.ContractDetail.EndDate)
                }}（有效期：{{
                  formateYear(
                    info.ContractDetail.StartDate,
                    info.ContractDetail.EndDate
                  )
                }}）
              </div>
            </div>
            <div class="flex">
              <div class="table-item" style="flex: 1">
                合同金额：{{ info.ContractDetail.Price }}元
              </div>
              <div class="table-item" style="flex: 1">
                付款方式：{{ info.ContractDetail.PayRemark }}
              </div>
            </div>
            <div class="flex">
              <div class="table-item" style="flex: 1">
                付款渠道：{{ info.ContractDetail.PayChannel }}
              </div>
              <div class="table-item" style="flex: 1">
                合同类型：{{ info.ContractDetail.ContractType }}
              </div>
            </div>
            <div class="table-item">
              <div class="flex">
                <h2 style="font-size: 14px; color: #333; margin-right: 20px">
                  购买品种：
                </h2>
                <ul style="flex: 1">
                  <li
                    v-for="item in info.PermissionList"
                    :key="item.ClassifyName"
                  >
                    <span>{{ item.ClassifyName }}：</span>
                    <template v-for="tag in item.Items">
                      <el-tag
                        size="small"
                        :key="tag.ChartPermissionId"
                        style="margin: 0 8px 5px"
                        v-if="item.CheckList.includes(tag.ChartPermissionId)"
                        >{{ tag.PermissionName }}</el-tag
                      >
                    </template>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div style="text-align: center; padding: 59px 0 20px 0">
            <el-button
              style="width: 152px; margin-right: 30px"
              type="primary"
              @click="handleSubmit"
              >提交</el-button
            >
            <el-button
              style="width: 152px"
              type="primary"
              plain
              @click="handleClose"
              >取消</el-button
            >
          </div>
        </div>
        <div v-else style="text-align: center; padding: 50px 0 200px 0">
          <img width="135" src="../../../assets/img/cus_m/nodata.png" alt="" />
          <p style="font-size: 14px; color: #aab4cc">暂无结果</p>
        </div>
      </div>
    </div>
  </el-dialog>
  <el-dialog
    v-model="showCustomeInfo"
    :modal-append-to-body="false"
    class="cus-dialog"
    width="660px"
    top="20vh"
    v-dialogDrag
  >
  <template #header>
    <div style="color: #333; font-size: 16px; font-weight: bold">
      客户基本信息
    </div>
  </template>
    
    <div v-if="cusInfo" class="contractinfo-wrap">
      <div class="table-wrap">
        <div class="flex">
          <div class="table-item" style="flex: 1; padding: 14px 20px">
            客户名称：{{ cusInfo.Item.CompanyName }}
          </div>
          <div class="table-item" style="flex: 1; padding: 14px 20px">
            地址：{{ cusInfo.Item.Province }}{{ cusInfo.Item.City
            }}{{ cusInfo.Item.Address }}
          </div>
        </div>
        <div class="flex">
          <div class="table-item" style="flex: 1; padding: 14px 20px">
            社会信用码：{{ cusInfo.Item.CreditCode }}
          </div>
          <div class="table-item" style="flex: 1; padding: 14px 20px">
            客户状态：{{ cusInfo.info.Status }}
          </div>
        </div>
        <div class="flex">
          <div class="table-item" style="flex: 1; padding: 14px 20px">
            客户来源：{{ cusInfo.info.Source }}
          </div>
          <div class="table-item" style="flex: 1; padding: 14px 20px">
            行业：{{ cusInfo.info.IndustryName }}
          </div>
        </div>
        <div class="flex">
          <div class="table-item" style="flex: 1; padding: 14px 20px">
            所属销售：{{ cusInfo.info.SellerName }}
          </div>
          <div class="table-item" style="flex: 1; padding: 14px 20px">
            备注：{{ cusInfo.info.Reasons }}
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 40px; margin-bottom: 33px">
        <el-button
          type="primary"
          style="width: 200px"
          @click="showCustomeInfo = false"
          >知道了</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>


<style lang="scss">
.cus-dialog {
  .el-dialog__header {
    background-color: #fff;
    border-bottom: 1px solid #dcdfe6;
    .el-dialog__close.el-icon.el-icon-close {
      color: #666;
    }
  }
}
.dialog-body-no {
  .el-dialog__body {
    padding: 20px 0 !important;
  }
  .el-input {
    width: 100%;
  }
  .el-dialog {
    min-width: 750px;
  }
}
.contractinfo-wrap {
  .top {
    display: flex;
    justify-content: space-between;
    padding: 10px 30px 30px 30px;
    border-bottom: 1px solid #dcdfe6;
    align-items: center;
  }
  .search-wrap {
    padding: 30px;
  }
  .content {
    padding: 0px 30px;
  }
  .table-wrap {
    border-top: 1px solid #dcdfe6;
    border-left: 1px solid #dcdfe6;
    .flex {
      display: flex;
    }
    .table-item {
      border-bottom: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
      padding: 14px 40px;
      li {
        padding-bottom: 17px;
        margin-bottom: 17px;
        border-bottom: 1px dashed #dcdfe6;
      }
      li:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
  }
}
</style>