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

<script setup lang="ts">
import { GlobalStore } from '@/stores/index'
import { ref, reactive, nextTick } from 'vue'
import ContractForm from './ContractForm.vue'
import { useRouter } from 'vue-router'
import { fnMd5 } from '@/utils/common'
import { ElMessageBox, ElMessage } from 'element-plus'
import TableBase from '@/components/TableBase/index.vue'
import { Edit, Delete, Finished, View } from '@element-plus/icons-vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
import { Storehouse_Contract_List, Storehouse_Contract_Del } from '@/api/storehouse/index'

const router = useRouter()
const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const ContractFormRef = ref<InstanceType<typeof ContractForm> | null>(null)

const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_number', label: '合同编号' },
  { prop: 'T_customer', label: '客户名称' },
  { prop: 'T_State', label: '状态', name: 'T_State' },
  { prop: 'T_out', label: '是否出库', name: 'T_out' },
  { prop: 'T_date', label: '更新时间' },
  { prop: 'operation', label: '操作', width: 260, fixed: 'right' }
]

const openContractFormDrawer = (type: string, row?: any) => {
  ContractFormRef.value?.openDrawer(type, row)
}

const updateOnTableList = () => TableRef.value?.getTableList()
// 审核
const processContract = (id: string) => {
  router.push({ name: 'ContractDetail', params: { id, type: fnMd5('contract') } })
}
// 删除
const UserDelete = (row: any) => {
  ElMessageBox.confirm('您确定要删除该销售合同吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res: any = await Storehouse_Contract_Del({ User_tokey: globalStore.GET_User_tokey, T_number: row.T_number })
      if (res.Code === 200) {
        ElMessage.success('删除成功！')
        nextTick(() => {
          TableRef.value?.getTableList()
        })
      }
    })
    .catch(() => {
      ElMessage.warning('取消成功！')
    })
}

// 搜索
const options = reactive([
  { name: '已通过', id: 1 },
  { name: '未通过', id: 2 },
  { name: '待审核', id: 3 }
])
const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_state: ''
})
const searchHandle = () => {
  TableRef.value?.searchTable()
}
</script>

<template>
  <div class="contract">
    <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_Contract_List" :initParam="initParam">
      <template #table-header>
        <div class="input-suffix">
          <el-row :gutter="20" style="margin-bottom: 0">
            <el-col :xl="6" :lg="8" :md="10">
              <span class="inline-flex items-center">合同编号：</span>
              <el-input
                v-model="initParam.T_name"
                type="text"
                class="w-50 m-2"
                placeholder="按产品名称搜索"
                @change="searchHandle"
              />
            </el-col>
            <el-col :xl="10" :md="12">
              <span class="inline-flex items-center">状态：</span>
              <el-select v-model="initParam.T_state" class="w-50" clearable placeholder="请选择状态~">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-button type="primary" @click="searchHandle">搜索</el-button>
            </el-col>
            <el-col :xl="6" :md="2" class="btn"
              ><el-button type="primary" @click="openContractFormDrawer('new')">添加</el-button></el-col
            >
          </el-row>
        </div>
      </template>
      <template #T_State="{ row }">
        <el-tag v-if="row.T_State === 1" type="success" effect="dark"> 已通过 </el-tag>
        <el-tag v-else-if="row.T_State === 2" type="warning" effect="dark"> 未通过 </el-tag>
        <el-tag v-else type="danger" effect="dark"> 待审核 </el-tag>
      </template>
      <template #T_out="{ row }">
        <el-tag v-if="row.T_out === 2 || row.T_out === 3" type="success" effect="dark">
          {{ row.T_out === 2 ? '已出库' : '已全部出库' }}
        </el-tag>
        <el-tag v-else-if="row.T_out === 1" type="warning" effect="dark"> 未出库 </el-tag>
        <el-tag v-else type="danger" effect="dark"> --- </el-tag>
      </template>
      <template #right="{ row }">
        <el-button
          :disabled="row.T_State !== 3"
          link
          type="warning"
          size="small"
          :icon="Finished"
          @click="processContract(row.T_number)"
          >审核</el-button
        >
        <el-button link type="primary" size="small" :icon="Edit" @click="openContractFormDrawer('edit', row)"
          >编辑</el-button
        >
        <el-button link type="success" size="small" :icon="View" @click="processContract(row.T_number)">详情</el-button>
        <el-button link type="danger" size="small" :icon="Delete" @click="UserDelete(row)">删除</el-button>
      </template>
    </TableBase>
    <ContractForm ref="ContractFormRef" @onTableList="updateOnTableList" />
  </div>
</template>

<style scoped lang="scss">
.contract {
  :deep(.el-drawer__header) {
    margin-bottom: 0;
  }
  .input-suffix {
    width: 100%;
    .inline-flex {
      white-space: nowrap;
    }
    .btn {
      display: flex;
      justify-content: end;
    }
    .w-50 {
      width: 12.5rem;
    }
  }
}
</style>