<template>
|
<el-dialog
|
width="1000px"
|
:visible="true"
|
:top="'15vh'"
|
:close-on-click-modal="false"
|
:append-to-body="true"
|
:destroy-on-close="true"
|
@close="close"
|
>
|
<div slot="title" align="left" class="dialog-title">
|
<div
|
class="tab-item"
|
:class="tabIndex == index ? 'active' : ''"
|
v-for="(item, index) in tabs"
|
:key="index"
|
@click="tabIndex = index"
|
>
|
{{ item }}
|
</div>
|
</div>
|
<el-form v-show="tabIndex == 0" ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm">
|
<div v-for="(item, index) in formData.list" :key="index">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="规格型号:">
|
{{ item.baseGoodModelName }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="单位:">
|
{{ item.unit }}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" v-for="(childItem, childIndex) in item.recordUserInfos" :key="childIndex">
|
<el-col :span="6">
|
<el-form-item label="分发数量:">
|
{{ childItem.count }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="使用人:">
|
<el-input v-if="childItem.isEdit" v-model="childItem.userName" style="width: 120px"></el-input>
|
<span v-else>{{ childItem.userName }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="联系电话:">
|
<el-input v-if="childItem.isEdit" v-model="childItem.phone" style="width: 120px"></el-input>
|
<span v-else>{{ childItem.phone }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item>
|
<span class="edit-text" @click="handleEditItem(childItem)">{{childItem.isEdit?'取消':'修改'}}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-divider v-if="index+1<formData.list.length"></el-divider>
|
</div>
|
</el-form>
|
|
<el-form
|
v-show="tabIndex == 1"
|
ref="ruleForm"
|
:model="formData"
|
:rules="rules"
|
class="demo-ruleForm"
|
style="width: 96%"
|
>
|
<div v-for="(item, index) in list" :key="index">
|
<el-row :gutter="20" class="item-header">
|
<el-col :span="6">
|
<el-form-item label="修改时间:">
|
{{ item.updateTime }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="修改人:">
|
{{ item.updateUserName }}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-divider></el-divider>
|
<template v-for="(record,i) in item.recordSkuDtoList">
|
<el-row :key="i" :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="规格型号:">
|
{{ record.baseGoodModelName }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="单位:">
|
{{ record.unit }}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" v-for="(use, k) in record.recordUserInfos" :key="k+'_'+i">
|
<el-col :span="6">
|
<el-form-item label="分发数量:">
|
{{ use.num }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="使用人:">
|
{{ use.useName }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="联系电话:">
|
<span>{{ use.phone }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<!-- <el-divider v-if="index+1<list.length"></el-divider>-->
|
<el-divider></el-divider>
|
</template>
|
</div>
|
</el-form>
|
<div v-if="tabIndex == 0" slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close"/>
|
<my-button name="保存" site="form" @click="save"/>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import myButton from '@/components/myButton/myButton';
|
import {useInfoUpdate, useRecord} from "@/api/stock/transfer";
|
|
export default {
|
components: {myButton},
|
props: {
|
setting: {
|
type: Object,
|
default: () => {
|
},
|
},
|
},
|
data() {
|
return {
|
tabs: ['修改使用人', '使用记录'],
|
tabIndex: 0,
|
list: [],
|
formData: {
|
list: [],
|
},
|
rules: {
|
code: [{required: true, message: '请输入机构编号', trigger: 'blur'}],
|
name: [{required: true, message: '请输入机构名称', trigger: 'blur'}],
|
status: [{required: true, message: '请选择状态', trigger: 'blur'}],
|
},
|
};
|
},
|
created() {
|
useRecord({transferOrderId: this.setting.id}).then((res) => {
|
let model = JSON.parse(JSON.stringify(res[0].recordSkuDtoList))
|
model.map(m => {
|
m.recordUserInfos.map(u => {
|
u.baseGoodModelId = m.baseGoodModelId
|
u.baseUnit = m.unit
|
u.businessId = this.setting.id
|
u.count = u.num
|
u.tel = u.phone
|
u.procureModelId = m.procureModelId
|
u.userName = u.useName
|
u.isEdit = false
|
})
|
})
|
this.formData.list = model;
|
this.list = res
|
});
|
},
|
methods: {
|
getEditInfo(id) {
|
},
|
handleEditItem(user) {
|
user.isEdit = !user.isEdit;
|
if(!user.isEdit){
|
console.log(user)
|
user.phone = user.tel
|
user.userName = user.useName
|
}
|
},
|
close() {
|
this.$emit('close');
|
},
|
save() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
let recordInfoList = []
|
this.formData.list.map(item=>{
|
item.recordUserInfos.map(re=>{
|
recordInfoList.push(re)
|
})
|
})
|
useInfoUpdate({recordInfoList}).then((res) => {
|
this.$message.success('保存成功！');
|
this.close();
|
this.$emit('search');
|
}).catch(()=>{
|
this.$message.error('保存失败');
|
});
|
} else {
|
this.$message.error('校验未通过，请检查。');
|
}
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.dialog-title {
|
display: flex;
|
align-items: center;
|
|
.tab-item {
|
color: #3d3d3d;
|
font-size: 16px;
|
font-style: normal;
|
padding: 0 10px;
|
position: relative;
|
cursor: pointer;
|
|
&.active::after {
|
content: '';
|
width: 100%;
|
height: 2px;
|
background: #409eff;
|
position: absolute;
|
bottom: -10px;
|
left: 0;
|
}
|
}
|
}
|
|
.edit-text {
|
color: #409eff;
|
cursor: pointer;
|
}
|
|
.item-header {
|
::v-deep {
|
.el-form-item__label,
|
.el-form-item__content {
|
font-weight: 700;
|
}
|
}
|
}
|
|
::v-deep .el-divider--horizontal {
|
margin: 10px 0;
|
}
|
|
::v-deep {
|
.el-form-item {
|
margin-bottom: 5px;
|
}
|
}
|
|
.line {
|
width: 100%;
|
height: 1px;
|
margin: 10px 0;
|
background: rgba($color: #dcdfe6, $alpha: 0.45);
|
}
|
</style>
|
