上传

src/views/Clue/Order/Comp/SchoolSettle.vue

@@ -10,6 +10,12 @@
       <el-form-item>
         <el-input v-model="searchForm.phone" placeholder="联系方式" clearable />
       </el-form-item>
+      <el-form-item>
+        <el-select v-model="searchForm.settleType" placeholder="结算类型" clearable filterable>
+          <el-option label="报名费" :value="1" />
+          <el-option label="其他支出" :value="2" />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-select v-model="searchForm.signUser" placeholder="登记人" clearable filterable>
           <el-option
@@ -86,7 +92,6 @@
           <el-radio :label="2"> 未结算 </el-radio>
         </el-radio-group>
       </el-form-item>
-
       <el-form-item>
         <el-button @click="handleSearch">查询</el-button>
         <el-button @click="handleReset">重置</el-button>
@@ -98,8 +103,11 @@
       v-loading="loading"
       :data="tableList"
       border
+      show-summary
+      :summary-method="getSummaries"
       @selection-change="handleSelectionChange"
     >
+      <el-table-column type="selection" width="60" />
       <el-table-column prop="signId" label="成交单号" min-width="120px" />
       <el-table-column prop="name" label="线索名称" min-width="120px" />
       <el-table-column prop="phone" label="联系方式" width="120px" />
@@ -108,16 +116,35 @@
       <el-table-column prop="signSchool" label="成交驾校" min-width="150px" />
       <el-table-column prop="signPlace" label="成交场地" min-width="150px" />
       <el-table-column prop="signClass" label="成交班型" min-width="150px" />
-      <el-table-column prop="settleTime" label="结算时间" width="120px" />
+      <el-table-column prop="signClass" label="结算单价" min-width="150px" />
+      <el-table-column prop="settleNum" label="结算数量" min-width="150px" />
+      <el-table-column prop="settleAmount" label="结算金额" min-width="150px" />
+      <el-table-column label="费用备注" width="90px">
+        <template #default="scope">
+          <el-popover placement="top" width="500px" trigger="click" v-if="scope.row.feeRemark">
+            <template #reference>
+              <el-button type="primary" style="padding: 0" text>点击查看</el-button>
+            </template>
+            <div v-dompurify-html="scope.row.feeRemark"></div>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="settleTime"
+        label="结算时间"
+        width="120px"
+        :formatter="dateFormatter"
+      />
       <el-table-column prop="settleUser" label="结算人" min-width="90px" />
-      <el-table-column prop="settleStatus" label="结算状态" width="90px" />
-      <el-table-column label="结算备注">
+      <el-table-column prop="settleType" label="结算类型" width="90px" fixed="right" />
+      <el-table-column prop="settleStatus" label="结算状态" width="90px" fixed="right" />
+      <el-table-column label="结算备注" width="90px">
         <template #default="scope">
           <el-popover placement="top" width="500px" trigger="click" v-if="scope.row.remark">
             <template #reference>
               <el-button type="primary" style="padding: 0" text>点击查看</el-button>
             </template>
-            <div v-dompurify-html="scope.row.settleRemark"></div>
+            <div v-dompurify-html="scope.row.remark"></div>
           </el-popover>
         </template>
       </el-table-column>
@@ -128,13 +155,34 @@
       :total="total"
       @pagination="getList"
     />
+
+    <el-dialog title="批量结算" v-model="showDailog" width="600px">
+      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
+        <el-form-item label="结算备注" prop="remark">
+          <Editor v-model:modelValue="form.remark" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span>
+          <el-button @click="showDailog = false">取 消</el-button>
+          <el-button :disabled="formLoading" type="primary" @click="handleSaveSettle">
+            确 定
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="SchoolSettle">
 import { getSimpleUserList as getUserOption } from '@/api/system/user'
 import { getPlaceList } from '@/api/school/place'
-import { getClassTypePage } from '@/api/school/class'
+import { getClassTypeList } from '@/api/school/class'
+import * as SettleApi from '@/api/clue/settle'
+
+import { dateFormatter } from '@/utils/formatTime'
+
+const message = useMessage() // 消息弹窗
 
 onMounted(() => {
   getOptions()
@@ -150,6 +198,7 @@ const searchForm = ref({
   signPlace: undefined,
   signClass: undefined,
   signId: undefined,
+  settleType: undefined,
   settleStatus: 2,
   pageSize: 20,
   pageNo: 1
@@ -165,6 +214,7 @@ function handleReset() {
     signPlace: undefined,
     signClass: undefined,
     signId: undefined,
+    settleType: undefined,
     settleStatus: 2,
     pageSize: 20,
     pageNo: 1
@@ -182,7 +232,7 @@ const total = ref(0)
 async function getList() {
   loading.value = true
   try {
-    const data = await DeliveryApi.getDeliveryPage(searchForm.value)
+    const data = await SettleApi.getSettlePage(searchForm.value)
     tableList.value = data.list
     total.value = data.total
   } finally {
@@ -190,12 +240,63 @@ async function getList() {
   }
 }
 
+function getSummaries(param) {
+  const { columns } = param
+  const sums = []
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = '合计'
+    } else if (column.property == 'settleNum') {
+      sums[index] = 123
+    } else if (column.property == 'settleAmount') {
+      sums[index] = 54321
+    } else {
+      sums[index] = ''
+    }
+  })
+
+  return sums
+}
+
 const batchIds = ref([])
 function handleSelectionChange(val) {
   batchIds.value = val.map((it) => it.id)
 }
 
-function batchSettle() {}
+const showDailog = ref(false)
+const form = ref({})
+const formRef = ref()
+const formLoading = ref(false)
+const rules = {
+  remark: { required: true, message: '结算备注不可为空', trigger: 'change,blur' }
+}
+
+function batchSettle() {
+  if (batchIds.value.length) {
+    showDailog.value = true
+    form.value = {
+      signIds: batchIds.value,
+      reamrk: undefined
+    }
+  } else {
+    message.info('请选择表格数据！')
+  }
+}
+
+async function handleSaveSettle() {
+  if (!formRef.value) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  try {
+    formLoading.value = true
+    await SettleApi.batchSaveSettle(form.value)
+    message.success(data)
+    showDailog.value = false
+    getList()
+  } finally {
+    formLoading.value = false
+  }
+}
 
 const schoolOptions = ref([])
 const allPlaceOptions = ref([])
@@ -228,8 +329,8 @@ function changePlace() {
 
 const classOptions = ref([])
 async function getClassTypeOptions() {
-  const data = await getClassTypePage({ placeId: searchForm.value.signPlace })
-  classOptions.value = data.list
+  const data = await getClassTypeList({ placeId: searchForm.value.signPlace, status: 0 })
+  classOptions.value = data
 }
 </script>