lc_finance/web/src/view/finance/financeAnalysis/components/material.vue

<template>
  <el-row>
    <el-col :span="3">
      <el-input placeholder="请输入材料名称" v-model="condition.name"></el-input>
    </el-col>
    <el-col :span="1" style="margin-left: 20px">
      <el-button @click="searchMaterial" icon="Search" type="primary">搜索</el-button>
    </el-col>
    <el-col :span="2" style="margin-left: 30px">
      <el-button
          @click="openMaterial"
          type="primary"
          icon="Plus">
        新增
      </el-button>
    </el-col>
  </el-row>
<!--  <div>{{ id.currentCode }}</div>-->
  <el-row style="margin-top: 10px">
    <el-col :span="18">
      <el-table :data="materialList">
        <el-table-column label="材料名称" prop="name" align="center"></el-table-column>
        <el-table-column label="计量单位" prop="unit" align="center"></el-table-column>
        <el-table-column label="数量" prop="number" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button text icon="Edit" type="primary" @click="openMaterialEdit(scope.row)">编辑</el-button>
            <el-button text icon="ChatLineSquare" type="primary">备注</el-button>
            <el-button text icon="Edit" type="primary" @click="deleteMaterial">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-drawer
      v-model="drawerShow"
      title="新增材料"
      direction="rtl"
      :before-close="handleClose"
  >
    <el-form size="large" label-width="80" label-position="left">
      <el-form-item label="材料名称">
        <el-input placeholder="请输入材料名称" v-model="addCondition.name"/>
      </el-form-item>
      <el-form-item label="单位">
        <el-input placeholder="请输入材料单位" v-model="addCondition.unit" />
      </el-form-item>
      <el-form-item label="数量">
        <el-input
            v-model="addCondition.number"
            type="number"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
            v-model="addCondition.remarks"
            :rows="3"
            type="textarea"
            placeholder="请输入备注"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="drawerShow = false">取消</el-button>
        <el-button type="primary" @click="addMaterial">
          确认
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { codeOperate } from '@/pinia/code/code'
import { queryProjectMaterial, createProjectMaterial, updateProjectMaterial } from '@/api/material'
import { defineExpose, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const drawerShow = ref(false)
const id = codeOperate()
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 100
  },
  code: "",
  name: ""
})

const addCondition = reactive({
  name: "",
  unit: "",
  number: 0,
  remarks: "",
  projectCode: ""
})

const materialList = reactive([])
// 0表示新增 1表示编辑
const currentOperation = ref(0)
// 编辑id
const editId = ref(0)
const getProjectMaterial = (code) => {
  condition.code = code
  addCondition.projectCode = code
  queryProjectMaterial(condition).then(res => {
    if (res.code === 0) {
      materialList.length = 0
      console.log(res.data.list)
      materialList.push(...res.data.list)
    }
  })
}
const openMaterial = () => {
  currentOperation.value = 0
  drawerShow.value = true
  addCondition.name = ''
  addCondition.unit = ''
  addCondition.number = 0
  addCondition.remarks = ''
}

const openMaterialEdit = (row) => {
  currentOperation.value = 1
  editId.value = row.ID
  drawerShow.value = true
  addCondition.name = row.name
  addCondition.unit = row.unit
  addCondition.number = row.number
  addCondition.remarks = row.remarks
}
const addMaterial = () => {
  addCondition.number = Number(addCondition.number)
  if(currentOperation.value === 0) {
    createProjectMaterial(addCondition).then(res => {
      if (res.code === 0) {
        drawerShow.value = false
        ElMessage.success('新增成功')
      }
    })
  } else {
    const editData = {
      id: editId.value,
      name: addCondition.name,
      unit: addCondition.unit,
      number: addCondition.number,
      remarks: addCondition.remarks,
      projectCode: addCondition.projectCode
    }
    updateProjectMaterial(editData).then(res => {
      if (res.code === 0) {
        drawerShow.value = false
        ElMessage.success('编辑成功')
      }
    })
  }
}
const handleClose = () => {
  drawerShow.value = false
}

const deleteMaterial = () => {}
const searchMaterial = () => {
  queryProjectMaterial(condition).then(res => {
    if (res.code === 0) {
      console.log(res.data)
    }
  })
}
defineExpose({
  getProjectMaterial
})
</script>

<style scoped>
</style>