Cold_putoutstorage_web/src/views/stockcontrol/storageFrom/Editinventory.vue

<!-- 扫码 -->
<template>
    <div class="">
        <el-button type="primary" @click="editFun(props.row)">编辑</el-button>
        <el-button type="danger" @click="delClick(props.row)">删除</el-button>
        <el-dialog v-model="dialogFormVisible" title="编辑" :append-to-body="true" draggable width="60%">
            <el-form ref="ruleFormRef" :rules="rules" :model="initParam" :inline="true">
                <el-divider content-position="center">药品信息</el-divider>
                <el-form-item :label="item.name" :label-width="formLabelWidth" v-for="(item,index) in data.showDiaData" :key="index" :prop="'medicineInfo.'+item.field_name">
                    <el-select v-model="initParam.medicineInfo[item.field_name]" :placeholder="'请选择'+item.name" class="inputWidth" v-if="[1,2,3,4,5].includes(item.type)">
                        <el-option :label="itemIt.name" :value="itemIt.id" v-for="itemIt,i in item.list" :key="i"/>
                    </el-select>
                    <el-input v-model="initParam.medicineInfo[item.field_name]" autocomplete="off" :placeholder="'请输入'+item.name" class="inputWidth" v-if="item.type==6"/>
                    <el-input v-model="initParam.medicineInfo[item.field_name]" autocomplete="off" :placeholder="'请输入'+item.name" class="inputWidth" v-if="item.type==7"/>
                    <el-input v-model="initParam.medicineInfo[item.field_name]" autocomplete="off" :placeholder="'请输入'+item.name" class="inputWidth" v-if="item.type==8"/>
                    <el-date-picker v-model="initParam.medicineInfo[item.field_name]" type="date" value-format="YYYY-MM-DD" :placeholder="'请输入'+item.name" clearable style="width: 200px;" v-if="item.type==9"/>
                    <el-date-picker v-model="initParam.medicineInfo[item.field_name]" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="'请输入'+item.name" clearable style="width: 200px;" v-if="item.type==10"/>
                </el-form-item>
                <el-divider content-position="center">入库信息</el-divider>
                <el-form-item class="el-form-item-main" label="数量" :label-width="formLabelWidth" prop="quantity">
                    <el-input v-model.number="initParam.quantity" autocomplete="off" class="inputWidth" />
                </el-form-item>
                <el-form-item class="el-form-item-main" label="购进单价" :label-width="formLabelWidth">
                    <el-input v-model="initParam.unit_price" autocomplete="off" class="inputWidth"/>
                </el-form-item>
                <el-form-item class="el-form-item-main" label="入库日期" :label-width="formLabelWidth" prop="date">
                    <el-date-picker v-model="initParam.date" type="date" placeholder="疫苗效期" value-format="YYYY-MM-DD" clearable style="width: 200px;" />
                </el-form-item>
                <el-form-item class="el-form-item-main" label="发货单位" :label-width="formLabelWidth">
                    <el-select v-model="initParam.forwarding_unit" placeholder="请选择发货单位" class="inputWidth">
                        <el-option :value="it" v-for="it,j in data.itemPir" :key="j" />
                    </el-select>
                </el-form-item>
                <el-form-item label="经办人" :label-width="formLabelWidth" prop="operator">
                    <el-select v-model="initParam.operator" placeholder="请选择经办人" class="inputWidth">
                        <el-option :label="it" :value="it" v-for="(it,j) in data.itemOpen" :key="j+Math.random()" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance} from 'element-plus'
import { syrulesData } from "@/plugins/rulesData";
const dialogFormVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
let rules:any = reactive({})


const props = defineProps({
    row: {
        type: Object,
        default: () => { },
    },
})

import { 
    medicListStock,
    stockunit,//发货单位
    operatorList,//经办人
    stockoutedit,//编辑
    stockoutdel,//删除
} from "@/api";
import { ElMessage, ElMessageBox } from 'element-plus'
const formLabelWidth = '110px'

//提交参数
let initParam:any = reactive({
    "id":"",
    "date": "",
    "forwarding_unit": "",
    "medicineInfo": {},
    "operator":'',
    "quantity": null,
    "unit_price":Number(null)
})
let data:any = reactive({
    tableData:[],
    showDiaData:[],
    itemPir:[],
    itemOpen:[],
    rules1:{},
    columns:[],// 渲染表格
    selectType:[],//表格的下拉对应
    editStrot:false,
    editIndex:null
}) 

//显示编辑
const editFun = async (row:any)=>{
    console.log('编辑',row)
    dialogFormVisible.value = true
    await medicListStockFun()//获取入库表单
    await itemPirFun()//发货单位
    await operatorListApi()//经办人

}
const emit:any = defineEmits(['scanCode','editinvent'])

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//提交
const submitForm = async (formEl: FormInstance | undefined) => {
    console.log('tijiao',initParam)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        stockouteditApi()
    } else {
        ElMessage.error('请完善必填项')
    }
  })
}
//提交编辑
const stockouteditApi = async ()=>{
    let param = {...initParam}
    param.unit_price = Number(param.unit_price)
    const reslut:any = await stockoutedit(param)
    if(reslut.code==200 && reslut.msg=='修改出库信息成功'){
        emit('editinvent', '');
        dialogFormVisible.value = false;
        ElMessage.success(reslut.msg)
    }
}
//收发货单位Api
const itemPirFun = async()=>{
    const reslut:any = await stockunit({ type: 3 })
    data.itemPir = reslut.data?.list
}
//经办人Api
const operatorListApi = async()=>{
    const reslut:any = await operatorList({})
    data.itemOpen = reslut.data?.list
}

//获取入库表单Api
const medicListStockFun = async ()=>{
    data.columns = []
    const reslut:any = await medicListStock({})
    if(reslut.code==200 && reslut.msg=='查询成功'){
        data.showDiaData = reslut.data?.list
        data.rules1 = {}
        data.columns = []
        data.selectType = []
        reslut.data?.list.forEach((value:any) => { //value设置成key
            data.selectType.push({type:value.type,list:value.list})
            data.columns.push({ prop: value.field_name, label: value.name, list:value.list})
            initParam.medicineInfo[value.field_name] = ''; // 这里可以根据需要设置其他值作为键的内容
            if(['product_id','enterprise_id','spec_id','batch_number','expiry_date','approval_number'].includes(value.field_name)){
                if(value.type==6){
                    data.rules1['medicineInfo.'+value.field_name] =  [{required: true,message: '必填项',trigger: 'change'},{ pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '请输入>=0，(最多两位小数)', trigger: "blur" },]
                }else if(value.type==7){
                    data.rules1['medicineInfo.'+value.field_name] =  [{required: true,message: '必填项',trigger: 'change'},{ pattern: /^(?:[1-9]\d*)$/, message: '请输入正整数', trigger: "blur" },]
                }else{
                    data.rules1['medicineInfo.'+value.field_name] = [{required: true,message: '必填项',trigger: 'change',}]
                }
            }
        });
        Object.assign(rules,{...data.rules1,...syrulesData})
        let obj = {...props.row}
        Object.keys(initParam).forEach(key => {
            if(key!='medicineInfo'){
                initParam[key] = obj[key]
            }else{
                Object.keys(initParam.medicineInfo).forEach(key => {
                    initParam.medicineInfo[key] = obj[key]
                })
            }
        })
        console.log('rules',initParam,obj)
        dialogFormVisible.value = true
    }
}

/**
 * 删除
 * @param row 
 */
const delClick = (row:any) => {
    ElMessageBox.confirm('删除一条信息，是否继续?','删除',{
      confirmButtonText: '确认删除',
      cancelButtonText: 'Cancel',
      type: 'warning',
      center: true,
    }).then(async() => {
        const reslut:any = await stockoutdel({id:row.id})
        console.log('删除成功',reslut)
        if(reslut.code==200 && reslut.msg=='删除出库信息成功'){ emit('editinvent', '');ElMessage.success(reslut.msg)}
    }).catch(() => {
      ElMessage.info('已取消删除')
    })
}

</script>
<style lang="scss">
.inputWidth {
    width: 200px;
}
</style>