收入分析

web/src/view/finance/costManage/components/detailList.vue

@@ -238,23 +238,124 @@
         </el-table-column>
       </el-table>
     </el-row>
-    <el-dialog
-      v-model="editDialogShow"
+    <el-drawer
+      v-model="editDrawerShow"
       title="编辑费用"
       width="40%"
     >
-      <el-form>
-        <el-form-item label="报销人">
-          <el-select/>
+      <el-form
+        label-width="90"
+        label-position="left"
+        size="large"
+      >
+        <el-form-item label="人员：">
+          <el-select
+            v-model="editData.reimburser"
+            placeholder="请选择人员名称"
+          >
+            <el-option
+              v-for="item in userList"
+              :key="item.ID"
+              :label="item.nickName"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部门：">
+          <el-select
+            v-model="editData.departmentId"
+            disabled
+            placeholder="请选择费用类型"
+          >
+            <el-option
+              v-for="item in departmentList"
+              :key="item.ID"
+              :label="item.name"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支入金额：">
+          <el-input
+            v-model="editData.depositAmount"
+            placeholder="请输入支入金额"
+            oninput="value=value.replace(/[^\d.]/g,'')"
+          />
+        </el-form-item>
+        <el-form-item label="支出金额：">
+          <el-input
+            v-model="editData.expenditureAmount"
+            placeholder="请输入支出金额"
+            oninput="value=value.replace(/[^\d.]/g,'')"
+          />
+        </el-form-item>
+        <el-form-item label="时间：">
+          <el-date-picker
+            v-model="editData.feeTime"
+            type="date"
+            placeholder="请选择日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="费用类型：">
+          <el-select
+            v-model="editData.genre"
+            placeholder="请选择费用类型"
+          >
+            <el-option
+              v-for="item in costTypeList"
+              :key="item.ID"
+              :label="item.name"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目：">
+          <el-select
+            v-model="editData.projectId"
+            placeholder="请选择项目"
+          >
+            <el-option
+              v-for="item in projectList"
+              :key="item.ID"
+              :label="item.name"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注：">
+          <el-input
+            v-model="editData.remarks"
+            placeholder="请填写费用备注"
+          />
         </el-form-item>
-        <el-form-item label="部门">
-          <el-select/>
+        <el-form-item label="费用明细：">
+          <el-input
+            v-model="editData.expenseDetail"
+            placeholder="请填写费用明细"
+          />
         </el-form-item>
-        <el-form-item label="支入金额">
-          <el-input/>
+        <el-form-item label="余额：">
+          <el-input
+            v-model="editData.thenBalance"
+            placeholder="请填写余额（选填）"
+            oninput="value=value.replace(/[^\d.]/g,'')"
+          />
         </el-form-item>
       </el-form>
-    </el-dialog>
+      <el-row
+        style="margin-top: 50px"
+        justify="end"
+      >
+        <el-button
+          type="primary"
+          size="large"
+          @click="editCost"
+        >确认</el-button>
+      </el-row>
+
+    </el-drawer>
   </div>
 </template>
 
@@ -265,6 +366,7 @@ import { getAllUsers } from '@/api/user'
 import { queryExpensesGenre } from '@/api/finance'
 import { getAllProject } from '@/api/project'
 import { queryCostList } from '@/api/cost'
+import { getDepByStart } from '@/api/department'
 defineOptions({
   name: 'DetailList'
 })
@@ -273,10 +375,13 @@ const timeTypeList = reactive([
   { label: '按月份查询', value: 'month' },
   { label: '按年份查询', value: 'year' }
 ])
+// 列表
 const userList = reactive([])
 const costTypeList = reactive([])
 const projectList = reactive([])
 const costList = reactive([])
+const departmentList = reactive([])
+// 查询数据
 const timeTypeValue = ref('date')
 const condition = reactive({
   pageInfo: {
@@ -293,16 +398,17 @@ const condition = reactive({
 const peopleSelect = ref('')
 const genreSelect = ref('')
 const projectSelect = ref('')
-const editDialogShow = ref(false)
+// 编辑数据
+const editDrawerShow = ref(false)
 const editData = reactive({
   id: 0,
-  reimburser: 0,
-  departmentId: 0,
+  reimburser: 1,
+  departmentId: 1,
   expenditureAmount: 0,
   depositAmount: 0,
   feeTime: '',
-  genre: 0,
-  projectId: 0,
+  genre: 1,
+  projectId: 1,
   expenseDetail: '',
   remarks: '',
   thenBalance: 0
@@ -312,6 +418,7 @@ onMounted(() => {
   getUserList()
   getCostTypeList()
   queryProjectList()
+  queryDepartmentList()
   getCostList(0, 0, 0)
 })
 
@@ -342,6 +449,15 @@ const queryProjectList = () => {
   })
 }
 
+const queryDepartmentList = () => {
+  getDepByStart().then(res => {
+    if (res.code === 0) {
+      departmentList.length = 0
+      departmentList.push(...res.data)
+    }
+  })
+}
+
 const consultCostList = () => {
   let nameId = 0
   let typeId = 0
@@ -355,9 +471,8 @@ const getCostList = (nameId, typeID, itemId) => {
   condition.reimburser = nameId
   condition.genre = typeID
   condition.projectId = itemId
-  console.log(condition)
   queryCostList(condition).then(res => {
-    console.log(res.data)
+    console.log('费用列表', res.data)
     if (res.code === 0) {
       costList.length = 0
       costList.push(...res.data.list)
@@ -365,8 +480,20 @@ const getCostList = (nameId, typeID, itemId) => {
   })
 }
 const costEdit = (row) => {
-  editDialogShow.value = true
+  editDrawerShow.value = true
   console.log(row)
+  Object.assign(editData, row)
+  // id: 0,
+  // reimburser: 1,
+  // departmentId: 1,
+  // expenditureAmount: 0,
+  // depositAmount: 0,
+  // feeTime: '',
+  // genre: 1,
+  // projectId: 1,
+  // expenseDetail: '',
+  // remarks: '',
+  // thenBalance: 0
 }
 const costDelete = (scope) => {
   console.log(scope)
@@ -406,6 +533,11 @@ const changeTimeType = (value) => {
     condition.monthTime = ''
   }
 }
+
+const editCost = () => {
+  console.log('支出金额', editData.expenditureAmount)
+  console.log('支出金额', typeof editData.expenditureAmount)
+}
 </script>
 
 <style scoped>