项目增删改查接口对接

src/api/program.js

@@ -4,6 +4,10 @@ import {programRequest} from '@/utils/api'
 export const programAPI = {
     // 登录
     list: (params) => programRequest.get('/program/list', {params}),
+    add: (data) => programRequest.post('/program', data),
+    update: (data) => programRequest.patch("/program", data),
+    delete: (id) => programRequest.delete(`/program/${id}`),
+    getOne: (id) => programRequest.get(`/program/${id}`),
 }
 
 export default {

src/views/Program.vue

@@ -47,33 +47,33 @@
     <!-- 筛选和操作 -->
     <el-card class="filter-card">
       <el-row :gutter="20">
-        <el-col :span="4">
+<!--        <el-col :span="4">-->
-          <el-select v-model="queryParams.status" placeholder="选择状态" clearable>
+<!--          <el-select v-model="queryParams.status" placeholder="选择状态" clearable>-->
-            <el-option label="全部" value=""/>
+<!--            <el-option label="全部" value=""/>-->
-            <el-option label="待确认" value="pending"/>
+<!--            <el-option label="待确认" value="pending"/>-->
-            <el-option label="已确认" value="confirmed"/>
+<!--            <el-option label="已确认" value="confirmed"/>-->
-            <el-option label="已拒绝" value="rejected"/>
+<!--            <el-option label="已拒绝" value="rejected"/>-->
-            <el-option label="已取消" value="cancelled"/>
+<!--            <el-option label="已取消" value="cancelled"/>-->
-          </el-select>
+<!--          </el-select>-->
-        </el-col>
+<!--        </el-col>-->
 
         <el-col :span="4">
-          <el-input v-model="queryParams.search" placeholder="搜索用户名或姓名" clearable/>
+          <el-input v-model="queryParams.keyword" placeholder="搜索项目名称、项目公司或地址" clearable/>
         </el-col>
 
-        <el-col :span="4">
+<!--        <el-col :span="4">-->
-          <el-date-picker
+<!--          <el-date-picker-->
-              v-model="dateRange"
+<!--              v-model="dateRange"-->
-              type="daterange"
+<!--              type="daterange"-->
-              range-separator="至"
+<!--              range-separator="至"-->
-              start-placeholder="开始日期"
+<!--              start-placeholder="开始日期"-->
-              end-placeholder="结束日期"
+<!--              end-placeholder="结束日期"-->
-              format="YYYY-MM-DD"
+<!--              format="YYYY-MM-DD"-->
-              value-format="YYYY-MM-DD"
+<!--              value-format="YYYY-MM-DD"-->
-          />
+<!--          />-->
-        </el-col>
+<!--        </el-col>-->
 
-        <el-row style="margin-left: 150px;" :gutter="10">
+        <el-row style="margin-left: 50px;" :gutter="10">
           <el-col :span="12">
             <el-button type="primary" @click="getList">搜索</el-button>
           </el-col>
@@ -112,7 +112,7 @@
               type="danger"
               plain
               icon="Delete"
-              :disabled="multiple"
+              :disabled="single"
               @click="handleDelete"
           >删除
           </el-button>
@@ -122,12 +122,14 @@
       <el-table
           :data="dataList"
           v-loading="loading"
+          @selection-change="handleSelectionChange"
           stripe
           style="width: 100%"
       >
         <el-table-column type="selection" width="55" align="center"/>
-        <el-table-column prop="id" label="ID"/>
+<!--        <el-table-column prop="id" label="ID"/>-->
         <el-table-column prop="name" label="项目名称"/>
+        <el-table-column prop="company" label="项目公司"/>
         <el-table-column label="项目负责人">
           <template #default="scope">
             <el-tag>{{ scope.row.user.username }}</el-tag>
@@ -142,7 +144,7 @@
 
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
           <template #default="scope">
-            <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)">详情</el-button>
+            <!--            <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)">详情</el-button>-->
             <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
             <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
           </template>
@@ -165,7 +167,7 @@
 
     <!-- 表单 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="项目名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入项目名称"/>
         </el-form-item>
@@ -175,11 +177,26 @@
         <el-form-item label="项目地点" prop="address">
           <el-input v-model="form.address" placeholder="请输入项目地点"/>
         </el-form-item>
-        <el-form-item label="开始时间" prop="startDate">
+        <el-form-item label="结算方式" prop="paymentMethod">
-          <el-input v-model="form.startDate" placeholder="请选择开始时间"/>
+          <el-input v-model="form.paymentMethod" placeholder="请输入结算方式"/>
         </el-form-item>
-        <el-form-item label="结束时间" prop="endDate">
+        <el-form-item label="项目时间" prop="dataRange">
-          <el-input v-model="form.endDate" placeholder="请选择结束时间"/>
+          <el-date-picker
+              v-model="form.dataRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+          />
+        </el-form-item>
+        <!--        <el-form-item label="开始时间" prop="startDate">-->
+        <!--          <el-input v-model="form.startDate" placeholder="请选择开始时间"/>-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="结束时间" prop="endDate">-->
+        <!--          <el-input v-model="form.endDate" placeholder="请选择结束时间"/>-->
+        <!--        </el-form-item>-->
+        <el-form-item label="项目描述" prop="introduction">
+          <el-input v-model="form.introduction" placeholder="请输入项目简介"/>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -195,10 +212,14 @@
 
 <script setup>
 
-import {reactive, ref, toRefs} from "vue";
+import {getCurrentInstance, reactive, ref, toRefs} from "vue";
 import {Check, Money, Wallet} from "@element-plus/icons-vue";
-import {ElMessage} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
 import {programAPI} from "@/api/program";
+import {useUserStore} from "@/stores/user";
+
+const {proxy} = getCurrentInstance();
+const userStore = useUserStore()
 
 // 统计
 const stats = ref({
@@ -211,7 +232,6 @@ const dateRange = ref([])
 const dataList = ref([])
 const loading = ref(false)
 const single = ref(true);
-const multiple = ref(true);
 // 分页
 const pagination = ref({
   page: 1,
@@ -226,19 +246,28 @@ const data = reactive({
   queryParams: {
     page: 1,
     size: 10,
-    dictName: undefined,
+    name: undefined,
-    dictType: undefined,
     status: undefined,
-    search: undefined
+    keyword: undefined
   },
   rules: {
-    dictName: [{required: true, message: "字典名称不能为空", trigger: "blur"}],
+    name: [{required: true, message: "项目名称不能为空", trigger: "blur"}],
-    dictType: [{required: true, message: "字典类型不能为空", trigger: "blur"}]
+    company: [{required: true, message: "公司不能为空", trigger: "blur"}],
+    address: [{required: true, message: "地址不能为空", trigger: "blur"}],
+    introduction: [{required: true, message: "简介不能为空", trigger: "blur"}],
+    paymentMethod: [{required: true, message: "结算方式不能为空", trigger: "blur"}],
+    dataRange: [{required: true, message: "时间不能为空", trigger: "blur"}],
   },
 });
 
 const {queryParams, form, rules} = toRefs(data);
 
+// TODO
+const getStats = () => {
+  // programAPI.getStats().then(res => {
+  //   stats.value = res.data.data.stats
+  // })
+}
 
 // 加载数据
 const getList = async () => {
@@ -246,7 +275,6 @@ const getList = async () => {
   // api请求
   queryParams.value.page = pagination.value.page;
   queryParams.value.size = pagination.value.size;
-  console.log(queryParams.value)
   programAPI.list(queryParams.value).then(res => {
     // console.log(res)
     dataList.value = res.data.data.list
@@ -259,9 +287,14 @@ const getList = async () => {
 const resetFilters = () => {
   queryParams.value = {
     page: 1,
-    size: 10
+    keyword: undefined
   }
   dateRange.value = []
+  getList()
+}
+
+const handleSelectionChange = (selection) => {
+  single.value = selection.length != 1;
 }
 
 const handleAdd = () => {
@@ -271,11 +304,27 @@ const handleAdd = () => {
 }
 
 const handleUpdate = (row) => {
-  ElMessage.info('修改')
+  programAPI.getOne(row.id).then(res => {
+    form.value = res.data.data
+    form.value.dataRange = [form.value.startDate, form.value.endDate]
+    title.value = "修改项目"
+    open.value = true;
+  })
 }
 
 const handleDelete = (row) => {
-  ElMessage.info('删除')
+  ElMessageBox.confirm('确定要删除吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    programAPI.delete(row.id).then(res => {
+      ElMessage.success('删除成功')
+      getList()
+    })
+  }).catch(() => {
+    ElMessage.info('已取消删除')
+  })
 }
 
 // 查看详情
@@ -283,7 +332,38 @@ const handleDetail = (row) => {
   ElMessage.info('查看详情')
 }
 
+const submitForm = () => {
+  proxy.$refs["formRef"].validate(valid => {
+    if (valid) {
+      form.value.linkmanId = userStore.user.id
+      form.value.startDate = form.value.dataRange[0]
+      form.value.endDate = form.value.dataRange[1]
+      if (form.value.id != undefined) {
+        delete form.value.user;
+        delete form.value.dataRange;
+        programAPI.update(form.value).then(res => {
+          ElMessage.success('修改成功')
+          open.value = false
+          getList()
+        })
+      } else {
+        programAPI.add(form.value).then(res => {
+          ElMessage.success('添加成功')
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
 
+const cancel = () => {
+  open.value = false
+}
+
+// 获取统计
+getStats()
+// 获取列表
 getList();
 </script>