<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.modelName }}
|
</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.list" :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="使用人:">
|
{{ childItem.user }}
|
</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" v-if="!childItem.isEdit">
|
<el-form-item>
|
<span class="edit-text" @click="handleEditItem(index, childIndex, childItem.isEdit)">修改</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</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 formData.list" :key="index">
|
<el-row :gutter="20" class="item-header">
|
<el-col :span="6">
|
<el-form-item label="修改时间:">
|
{{ item.time }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="修改人:">
|
{{ item.userName }}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="line"></div>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="规格型号:">
|
{{ item.modelName }}
|
</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.list" :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="使用人:">
|
{{ childItem.user }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="联系电话:">
|
<span>{{ childItem.phone }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="line"></div>
|
</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 * as finsystenant from '@/api/baseSetting/finsystenant';
|
|
export default {
|
components: { myButton },
|
props: {
|
setting: {
|
type: Object,
|
default: () => {},
|
},
|
},
|
data() {
|
return {
|
tabs: ['修改使用人', '使用记录'],
|
tabIndex: 0,
|
checkedList: [],
|
formData: {
|
list: [
|
{
|
modelName: '型号111111',
|
unit: '套',
|
time: '2023-08-08 10:23:34',
|
userName: '管理员',
|
list: [
|
{
|
count: 1,
|
user: '张三',
|
phone: '18500000001',
|
isEdit: false,
|
},
|
],
|
},
|
{
|
modelName: '型号222222',
|
unit: '套',
|
list: [
|
{
|
count: 1,
|
user: '张三',
|
phone: '18500000001',
|
isEdit: false,
|
},
|
],
|
},
|
],
|
},
|
rules: {
|
code: [{ required: true, message: '请输入机构编号', trigger: 'blur' }],
|
name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
|
status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
|
},
|
};
|
},
|
created() {},
|
methods: {
|
getEditInfo(id) {},
|
handleEditItem(index, childIndex) {
|
this.formData.list[index].list[childIndex].isEdit = true;
|
},
|
close() {
|
this.$emit('close');
|
},
|
save() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
const params = Object.assign({}, this.formData);
|
if (this.setting.id) {
|
// 编辑接口
|
finsystenant.edit(params).then((res) => {
|
if (res) {
|
this.$message.success('保存成功！');
|
this.close();
|
this.$emit('search');
|
} else {
|
this.$message.error('保存失败');
|
}
|
});
|
} else {
|
params.orgId = this.setting.orgId;
|
finsystenant.add(params).then((res) => {
|
if (res) {
|
this.$message.success('保存成功！');
|
this.close();
|
this.$emit('search');
|
} else {
|
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-form-item {
|
margin-top: 10px;
|
margin-bottom: 10px;
|
}
|
}
|
.line {
|
width: 100%;
|
height: 1px;
|
margin: 10px 0;
|
background: rgba($color: #dcdfe6, $alpha: 0.45);
|
}
|
</style>
|
