需求管理页面完善

src/http/api/sourcing/index.ts

@@ -4,11 +4,19 @@ import { get, post } from '../../index'
 export const addLeaseInfoApi = (data: any) => {
     return post('/material-mall/ma-lease/add', data)
 }
+// 需求管理编辑
+export const editLeaseInfoApi = (data: any) => {
+    return post('/material-mall/ma-lease/edit', data)
+}
 // 需求列表查询
-export const getLeaseListApi = () => {
+export const getLeaseListApi = (data: any) => {
-    return get('/material-mall/ma-lease/list', {})
+    return get('/material-mall/ma-lease/list', data)
+}
+// 需求列表详情
+export const getLeaseDetailsByIdApi = (data: any) => {
+    return get('/material-mall/ma-lease/getById', data)
 }
 // 删除
-export const deleteLeaseInfoApi = () => {
+export const deleteLeaseInfoApi = (data: any) => {
-    return get('/material-mall/ma-lease/list', {})
+    return post('/material-mall/ma-lease/deleteById', data)
 }

src/views/user/sourcingNeed/index.vue

@@ -1,27 +1,85 @@
 <template>
     <!-- 寻源需求 -->
-    <el-form :inline="true" size="default" label-width="auto">
+    <el-form
-        <el-form-item>
+        :inline="true"
-            <el-input placeholder="请输入需求名称" />
+        size="default"
-        </el-form-item>
+        label-width="0"
-        <el-form-item>
+        ref="searchFormRef"
-            <el-input placeholder="请输入需求编号" />
+        :model="searchParams"
-        </el-form-item>
+    >
-        <el-form-item>
+        <el-row>
-            <el-input placeholder="需求状态" />
+            <el-col :span="4">
-        </el-form-item>
+                <el-form-item prop="leaseName">
-        <el-form-item>
+                    <el-input
-            <el-input placeholder="截止日期" />
+                        style="width: 100%"
-        </el-form-item>
+                        placeholder="请输入需求名称"
-        <el-form-item>
+                        v-model="searchParams.leaseName"
-            <el-input placeholder="发布时间" />
+                        clearable
-        </el-form-item>
+                    />
+                </el-form-item>
+            </el-col>
+            <el-col :span="4">
+                <el-form-item prop="leaseCode">
+                    <el-input
+                        style="width: 100%"
+                        placeholder="请输入需求编号"
+                        v-model="searchParams.leaseCode"
+                        clearable
+                    />
+                </el-form-item>
+            </el-col>
+            <el-col :span="4">
+                <el-form-item prop="leaseStatus">
+                    <el-select
+                        clearable
+                        style="width: 100%"
+                        placeholder="选择需求状态"
+                        v-model="searchParams.leaseStatus"
+                    >
+                        <el-option label="待接单" :value="0" />
+                        <el-option label="已接单" :value="1" />
+                        <el-option label="已到期" :value="2" />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item>
+                    <el-date-picker
+                        style="width: 100%"
+                        v-model="endTime"
+                        type="daterange"
+                        range-separator="-"
+                        value-format="YYYY-MM-DD"
+                        start-placeholder="截止开始日期"
+                        end-placeholder="截止结束日期"
+                    />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item>
+                    <el-date-picker
+                        v-model="releaseTime"
+                        style="width: 100%"
+                        type="daterange"
+                        range-separator="-"
+                        value-format="YYYY-MM-DD"
+                        start-placeholder="发布开始日期"
+                        end-placeholder="发布结束日期"
+                    />
+                </el-form-item>
+            </el-col>
+        </el-row>
 
         <el-form-item>
-            <el-button>查询</el-button>
+            <el-button @click="getLeaseListData" type="primary">查询</el-button>
-            <el-button>重置</el-button>
+            <el-button @click="onReset">重置</el-button>
             <el-button
-                @click="addOrEditDialogVisible = true"
+                @click="
+                    () => {
+                        addOrEditDialogVisible = true
+                        isRepublish = true
+                    }
+                "
                 style="background-color: #17907f; color: #fff"
             >
                 需求新建
@@ -42,24 +100,30 @@
         <el-table-column align="center" prop="leaseCode" label="需求编号" />
         <el-table-column align="center" prop="leaseName" label="需求名称" />
         <el-table-column align="center" prop="operateAddress" label="需求所在地" />
-        <el-table-column align="center" prop="person" label="发布人" />
+        <el-table-column align="center" prop="publishUser" label="发布人" />
         <el-table-column align="center" prop="endTime" label="需求截止日期" />
-        <el-table-column align="center" prop="createTime" label="发布时间" />
+        <el-table-column align="center" prop="startTime" label="发布时间" />
         <el-table-column align="center" prop="leaseStatusName" label="需求状态" />
         <el-table-column align="center" label="操作" width="160">
             <template #default="{ row }">
-                <el-button size="small" text type="primary"> 重新发布 </el-button>
+                <el-button
+                    text
+                    size="small"
+                    type="primary"
+                    v-if="row.leaseStatus === 2"
+                    @click="onRepublish(row.id)"
+                >
+                    重新发布
+                </el-button>
                 <el-popconfirm
                     width="220"
                     :icon="InfoFilled"
                     icon-color="#626AEF"
                     title="确定删除该项需求吗？"
-                    @confirm="onDelete(row)"
+                    @confirm="onDelete(row.id)"
                 >
                     <template #reference>
-                        <el-button size="small" text type="danger" @click="onDelete(row)">
+                        <el-button size="small" text type="danger"> 删除 </el-button>
-                            删除
-                        </el-button>
                     </template>
                     <template #actions="{ confirm }">
                         <el-button size="small">取消</el-button>
@@ -70,6 +134,30 @@
         </el-table-column>
     </el-table>
 
+    <!-- <el-pagination
+        size="small"
+        background
+        layout="prev, pager, next"
+        :page-size="searchParams.pageSize"
+        :total="total"
+        class="mt-4"
+        @current-change="onCurrentChange"
+        v-if="total > 0"
+    /> -->
+
+    <el-pagination
+        style="text-align: right"
+        background
+        size="small"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="searchParams.pageSize"
+        :current-page="searchParams.pageNum"
+        layout="total, prev, pager, next,sizes"
+        @size-change="onCurrentChange"
+        @current-change="onCurrentChange"
+    />
+
     <!-- 新增修改对话框 -->
     <el-dialog
         title="新增"
@@ -180,6 +268,7 @@
                             value-format="YYYY-MM-DD"
                             v-model="addOrEditForm.endTime"
                             placeholder="请选择需求截止日期"
+                            :disabled-date="disabledDate"
                         />
                     </el-form-item>
                 </el-col>
@@ -230,8 +319,7 @@
         <template #footer>
             <div class="dialog-footer">
                 <el-button @click="onCancel">取消</el-button>
-                <el-button type="primary" @click="onSubmit(false)"> 保存 </el-button>
+                <el-button type="primary" @click="onSubmit()"> 提交 </el-button>
-                <el-button type="primary" @click="onSubmit(true)"> 提交 </el-button>
             </div>
         </template>
     </el-dialog>
@@ -240,7 +328,13 @@
 <script setup lang="ts">
 import UploadComponentNew from 'components/uploadComponentNew/index.vue'
 import { getCompanyListApi, getGoodsClassListApi } from 'http/api/home'
-import { addLeaseInfoApi, getLeaseListApi, deleteLeaseInfoApi } from 'http/api/sourcing/index'
+import {
+    addLeaseInfoApi,
+    getLeaseListApi,
+    editLeaseInfoApi,
+    deleteLeaseInfoApi,
+    getLeaseDetailsByIdApi,
+} from 'http/api/sourcing/index'
 import { InfoFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
@@ -248,7 +342,23 @@ const addOrEditDialogVisible = ref(false)
 const companyOptions = ref<any>([])
 const classOptions = ref<any>([])
 const addOrEditFormRef = ref<any>(null)
+const searchFormRef = ref<any>(null)
 const leaseList = ref<any>([])
+const isRepublish = ref(true)
+const total = ref(0)
+const endTime = ref([])
+const releaseTime = ref([])
+const searchParams = reactive({
+    leaseName: '',
+    leaseCode: '',
+    leaseStatus: '',
+    finishStartTime: '',
+    finishEndTime: '',
+    publishStartTime: '',
+    publishEndTime: '',
+    pageSize: 10,
+    pageNum: 1,
+})
 const addOrEditForm = reactive<any>({
     leaseName: '',
     typeId: '',
@@ -283,53 +393,122 @@ const addOrEditFormRules = reactive({
     fileInfoList: [{ required: true, message: '请上传参考图片', trigger: 'blur' }],
 })
 
-const successResultCallBackFnDevicePic = () => {
+const disabledDate = (date: any) => {
-    console.log(99999)
+    const today = new Date()
+    // 禁用今天之前的日期
+    return date.getTime() < today.getTime()
+}
+
+const successResultCallBackFnDevicePic = (list: any) => {
+    console.log(99999, list)
 }
 
 const getClassAndCompanyData = async () => {
     const classResult: any = await getGoodsClassListApi()
     const companyResult: any = await getCompanyListApi()
 
-    console.log('装备分类', classResult)
-    console.log('公司信息', companyResult)
-
     classOptions.value = classResult.data
     companyOptions.value = companyResult.data
 }
 
+const onCurrentChange = (val: any) => {
+    console.log(val)
+}
+
 // 获取列表
 const getLeaseListData = async () => {
-    const { data: res }: any = await getLeaseListApi()
+    if (endTime.value.length > 0) {
-    console.log(res, '列表返回结果')
+        searchParams.finishStartTime = endTime.value[0]
+        searchParams.finishEndTime = endTime.value[1]
+    }
+    if (releaseTime.value.length > 0) {
+        searchParams.publishStartTime = releaseTime.value[0]
+        searchParams.publishEndTime = releaseTime.value[1]
+    }
+    const { data: res }: any = await getLeaseListApi(searchParams)
     leaseList.value = res.rows
+    total.value = res.total
+}
+
+// 重置
+const onReset = () => {
+    endTime.value = []
+    releaseTime.value = []
+    searchParams.finishStartTime = ''
+    searchParams.finishEndTime = ''
+    searchParams.publishStartTime = ''
+    searchParams.publishEndTime = ''
+    searchFormRef.value.resetFields()
+    getLeaseListData()
 }
 // 删除
-const onDelete = (row: any) => {
+const onDelete = async (id: any) => {
-    deleteLeaseInfoApi()
+    const res: any = await deleteLeaseInfoApi({ id })
-}
-
-// 提交
-const onSubmit = async (type: boolean) => {
-    addOrEditFormRef.value.validate((valid: any) => {
-        if (valid) {
-            console.log('校验通过')
-        }
-    })
-    addOrEditForm.typeId = addOrEditForm.typeIds[addOrEditForm.typeIds.length - 1]
-    addOrEditForm.isSubmit = type
-    const res: any = await addLeaseInfoApi(addOrEditForm)
-    console.log(res, '表单提交结果')
-
     if (res.code === 200) {
         ElMessage({
             type: 'success',
-            message: `${type ? '提交' : '保存'}成功`,
+            message: '删除成功',
         })
-        addOrEditFormRef.value.resetFields()
+        getLeaseListData()
-        addOrEditDialogVisible.value = false
     }
 }
+// 重新发布
+const onRepublish = async (id: any) => {
+    isRepublish.value = false
+    const res: any = await getLeaseDetailsByIdApi({ id })
+    const {
+        leaseName,
+        typeId,
+        companyId,
+        person,
+        personPhone,
+        leaseDay,
+        leaseNum,
+        endTime,
+        description,
+        typeIds,
+    } = res.data
+
+    Object.assign(addOrEditForm, {
+        leaseName,
+        typeId,
+        companyId,
+        person,
+        personPhone,
+        leaseDay,
+        leaseNum,
+        endTime,
+        description,
+        typeIds,
+        id,
+    })
+
+    addOrEditForm.typeIds = addOrEditForm.typeIds.map((e: any) => {
+        return (e *= 1)
+    })
+    addOrEditDialogVisible.value = true
+}
+
+// 提交
+const onSubmit = () => {
+    addOrEditFormRef.value.validate(async (valid: any) => {
+        if (valid) {
+            addOrEditForm.isSubmit = isRepublish.value
+            addOrEditForm.typeId = addOrEditForm.typeIds[addOrEditForm.typeIds.length - 1]
+            const SUBMIT_API = isRepublish.value ? addLeaseInfoApi : editLeaseInfoApi
+            const res: any = await SUBMIT_API(addOrEditForm)
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '提交成功',
+                })
+                addOrEditFormRef.value.resetFields()
+                addOrEditDialogVisible.value = false
+                getLeaseListData()
+            }
+        }
+    })
+}
 
 // 取消按钮
 const onCancel = () => {
@@ -347,4 +526,11 @@ onMounted(() => {
 :deep.upload-tip .el-form-item__label {
     color: transparent;
 }
+.el-pagination {
+    justify-content: flex-end;
+    padding: 5px 0;
+}
+:deep.el-pagination.is-background .el-pager li.is-active {
+    background-color: #3cb4a6;
+}
 </style>