baozhida_erp/src/views/storehouse/sales/VerifyContractDetail.vue

<script setup lang="ts">
// import VerifyForm from './VerifyForm.vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, reactive, onMounted, nextTick, defineAsyncComponent } from 'vue'
import TableBase from '@/components/TableBase/index.vue'
import { Edit, Delete, View } from '@element-plus/icons-vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
import { Storehouse_VerifyContract_List, Storehouse_VerifyContract_Del } from '@/api/storehouse/index'
import { useTablePublic } from '@/hooks/useTablePublic'

const VerifyForm = defineAsyncComponent({
  loader: () => import(/*webpackChunkName: 'ContractForm'*/ './VerifyForm.vue'),
  delay: 500,
  timeout: 3000,
  suspensible: true
})
const customer_id = ref('')
const route = useRoute()
const router = useRouter()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const VerifyFormRef = ref<InstanceType<typeof VerifyForm> | null>(null)
const { globalStore, updateOnTableList } = useTablePublic()

const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_number', label: '合同编号' },
  { prop: 'T_date', label: '签订时间' },
  { prop: 'T_discount', label: '金额' },
  { prop: 'T_start_date', label: '起始时间' },
  { prop: 'T_end_date', label: '终止时间' },
  { prop: 'T_verify_state', label: '是否过期', name: 'T_verify_state' },
  { prop: 'operation', label: '操作', width: 260, fixed: 'right' }
]
const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_customer_id: route.params.id
})
const openContract = (type: string, row?: any) => VerifyFormRef.value?.openDrawer(type, row)
const verifyDetail = (id: string) => router.push({ name: 'ContractDetail', params: { id, verify: 'verify' } })
const verifyDelete = (number: number) => {
  ElMessageBox.confirm('您确定要删除该合同明细吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res: any = await Storehouse_VerifyContract_Del({
        User_tokey: globalStore.GET_User_tokey,
        T_number: number
      })
      if (res.Code === 200) {
        ElMessage.success('删除成功！')
        nextTick(() => {
          updateOnTableList(TableRef.value)
        })
      }
    })
    .catch(() => {
      ElMessage.warning('取消成功！')
    })
}
onMounted(() => {
  const { params } = route
  customer_id.value = params.id as string
})
</script>

<template>
  <div class="verify-contract">
    <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_VerifyContract_List" :initParam="initParam">
      <template #table-header>
        <el-row :gutter="20" style="margin-bottom: 0" class="input-suffix">
          <el-col :xl="6" :md="8">
            <h3>合同明细</h3>
          </el-col>
          <el-col :xl="6" :md="4" :offset="12" class="btn"
            ><el-button type="primary" @click="openContract('new')">添加</el-button>
            <el-button type="primary" @click="router.back()">返回</el-button>
          </el-col>
        </el-row>
      </template>
      <template #T_verify_state="{ row }">
        <el-tag v-if="row.T_verify_state === 1" type="warning" effect="dark"> 未签约 </el-tag>
        <el-tag v-else-if="row.T_verify_state === 2" type="info" effect="dark"> 已作废 </el-tag>
        <el-tag v-else-if="row.T_verify_state === 3" type="success" effect="dark"> 已签约 </el-tag>
        <el-tag v-else type="danger" effect="dark"> 即将到期 </el-tag>
      </template>
      <template #right="{ row }">
        <el-button link type="primary" size="small" :icon="Edit" @click="openContract('edit', row)">编辑</el-button>
        <el-button link type="success" size="small" :icon="View" @click="verifyDetail(row.T_number)">详情</el-button>
        <el-button link type="danger" size="small" :icon="Delete" @click="verifyDelete(row.T_number)">删除</el-button>
      </template>
    </TableBase>
    <VerifyForm ref="VerifyFormRef" @onTableList="updateOnTableList(TableRef)" :verify_customer_id="customer_id" />
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.verify-contract {
  @include f-direction;

  :deep(.el-drawer__header) {
    margin-bottom: 0;
  }
  .input-suffix {
    width: 100%;
    .btn {
      display: flex;
      justify-content: end;
    }
  }
}
</style>