<template>
<Layout class="rightContent">
<Content>
<div class="my-page">
<Form ref="form" :model="formData" :rules="rules" :label-width="80">
<FormItem label="申请人">
<span>{{ this.userInfo.name }}</span>
</FormItem>
<FormItem label="申购单位">
<span>{{ this.userInfo.orgName }}</span>
</FormItem>
<FormItem label="联系电话" prop="tel">
<Input v-model.number="formData.tel" placeholder="请输入联系电话" />
</FormItem>
<FormItem label="邮箱" prop="email">
<Input v-model="formData.email" placeholder="请输入邮箱" />
</FormItem>
<FormItem label="用途" prop="purpose">
<RadioGroup v-model="formData.purpose" @on-change="purposeChange">
<Radio v-for="val in commonConst.purposeVal" :key="val" :label="val">
{{ commonConst.purposeName[val] }}
</Radio>
</RadioGroup>
</FormItem>
<FormItem label="申购理由" prop="reason">
<Input type="textarea" v-model="formData.reason" placeholder="请输入" />
</FormItem>
<FormItem label="试剂信息" prop="reagentsList">
<Button type="success" @click="addItem">添加</Button>
<!-- <Button type="success">导入</Button> -->
<Table
:columns="column"
:data="formData.reagentsList"
size="small"
:disabled-hover="true"
border
style="margin-top:10px;max-width:900px;"
>
<template #chemicalId="{index}">
<FormItem
:prop="'reagentsList.' + index + '.chemicalId'"
:rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
>
<Select
v-model="formData.reagentsList[index].chemicalId"
:loading="searchLoading"
@on-query-change="onQueryChange($event, index)"
remote
filterable
transfer
placeholder="请输入试剂名称或cas号"
>
<Option
v-for="item in formData.reagentsList[index].chemicalList"
:value="item.id"
:key="item.id"
:label="item.name"
></Option>
</Select>
</FormItem>
</template>
<template #spec="{index}">
<FormItem
:prop="'reagentsList.' + index + '.spec'"
:rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
>
<i-input v-model.number="formData.reagentsList[index].spec" placeholder="请输入" style="top:0">
<Select v-model="formData.reagentsList[index].specUnit" slot="append" style="width: 70px" transfer>
<Option v-for="val in commonConst.specUnitVal" :value="val" :key="val">
{{ commonConst.specUnitName[val] }}
</Option>
</Select>
</i-input>
</FormItem>
</template>
<template #purity="{index}">
<FormItem
:prop="'reagentsList.' + index + '.purity'"
:rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
>
<Select v-model="formData.reagentsList[index].purity" transfer placeholder="请选择">
<Option v-for="val in commonConst.purityVal" :value="val" :key="val">
{{ commonConst.purityName[val] }}
</Option>
</Select>
</FormItem>
</template>
<template #number="{index}">
<FormItem
:prop="'reagentsList.' + index + '.number'"
:rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
>
<Input v-model.number="formData.reagentsList[index].number" placeholder="请输入" />
</FormItem>
</template>
<template #labId="{index}">
<FormItem
:prop="'reagentsList.' + index + '.labId'"
:rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
>
<Select
v-model="formData.reagentsList[index].labId"
@on-open-change="labSelectOpen"
transfer
placeholder="请选择"
>
<Option v-for="item in labList" :value="item.id" :key="item.id">
{{ item.orgName }}
</Option>
</Select>
</FormItem>
</template>
<template #action="{index}">
<span class="btn-a" style="color:red;" @click="delItem(index)">删除</span>
</template>
</Table>
</FormItem>
<FormItem>
<Button type="primary" @click="saveData">保存</Button>
<Button @click="$router.back()">取消</Button>
</FormItem>
</Form>
<Spin fix v-if="loading"></Spin>
</div>
</Content>
</Layout>
</template>
<script>
export default {
name: 'apply-buy-edit',
inject: ['systemRole'],
data() {
let column = [
{ title: '序号', width: 50, align: 'center', type: 'index' },
{ title: '试剂名称 | cas号', slot: 'chemicalId', minWidth: 150 },
{ title: '规格', slot: 'spec', minWidth: 130 },
{ title: '纯度', slot: 'purity', minWidth: 90 },
{ title: '数量', slot: 'number', minWidth: 90 },
{ title: '所属实验室', slot: 'labId', minWidth: 150 },
{ title: '操作', slot: 'action', width: 60, align: 'center' }
];
return {
rules: {
tel: { type: 'number', required: true, message: '请输入联系电话' },
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
],
purpose: { type: 'number', required: true, message: '请选择用途' },
reagentsList: { type: 'array', required: true, message: '请填写试剂信息' }
},
formData: {
purpose: 2,
reagentsList: [
{
chemicalId: '', //试剂id
spec: '', //规格
specUnit: 1, //规格单位，1g/瓶、2ml/瓶、3g/袋、4g/桶
purity: '', //纯度，1分析纯、2化学纯、3优级纯、4色谱纯、99其他
number: '', //数量
labId: '', //所属实验室
// expiryDate:'', //有效期至
chemicalList: []
}
]
},
column,
labList: [],
searchLoading: false,
timer: null,
loading: false,
userInfo: {}
};
},
computed: {
ajaxPath() {
return {
submit: '/api/my_purchase_apply/apply',
lab_list: '/api/common_api/lab_list'
};
}
},
created() {
this.setApplyToken();
if (this.$route.params.id && this.$route.params.id != 'add') {
this.loadData();
} else {
this.$store.dispatch('getUserInfo').then(res => {
this.$set(this.formData, 'tel', Number(res.mobile));
this.$set(this.formData, 'email', res.email);
this.$set(this.formData, 'orgId', res.unit);
this.$set(this.userInfo, 'name', res.name);
this.$set(this.userInfo, 'orgName', res.department);
});
}
},
methods: {
purposeChange() {
this.formData.reagentsList.forEach(item => (item.labId = ''));
this.labList = [];
},
//初始化数据
loadData() {
this.loading = true;
this.commonMethods.emitAjax({
path: `/api/purchase_apply/${this.$route.params.id}`,
success: res => {
this.loading = false;
this.$set(this.formData, 'tel', Number(res.user.mobile));
this.$set(this.formData, 'email', res.user.email);
this.$set(this.formData, 'orgId', res.user.unit);
this.$set(this.formData, 'reason', res.reason);
this.$set(this.formData, 'purpose', res.purpose);
this.$set(this.userInfo, 'name', res.user.name);
this.$set(this.userInfo, 'orgName', res.orgName);
this.getReagentList(res);
},
error: err => {
this.loading = false;
!err.message && this.$Message.error('获取详情失败');
}
});
},
// 获取试剂信息
getReagentList(data) {
this.commonMethods.emitAjax({
path: `/api/purchase_apply/${this.$route.params.id}/reagent_list`,
success: res => {
if (res && res.length) {
this.labList = [{ id: data.labId, orgName: data.labName }];
let arr = res.map(item => {
return {
chemicalId: item.chemicalId, //试剂id
spec: item.spec, //规格
specUnit: item.specUnit, //规格单位，1g/瓶、2ml/瓶、3g/袋、4g/桶
purity: item.purity, //纯度，1分析纯、2化学纯、3优级纯、4色谱纯、99其他
number: item.number, //数量
labId: data.labId, //所属实验室
chemicalList: [{ id: item.chemicalId, name: item.chemical.name }]
};
});
this.$set(this.formData, 'reagentsList', arr);
}
},
error: err => {
!err.message && this.$Message.error('获取试剂信息失败');
}
});
},
setApplyToken() {
this.$store.dispatch('getSubmitToken').then(applyToken => {
this.$set(this.formData, 'applyToken', applyToken);
});
},
addItem() {
this.formData.reagentsList.push({
chemicalId: '',
spec: '',
specUnit: 1,
purity: '',
number: '',
labId: ''
});
},
onQueryChange(searchKeyword, index) {
if (this.timer) clearTimeout(this.timer);
this.searchLoading = true;
this.timer = setTimeout(() => {
this.$store
.dispatch('getChemicalList', { searchKeyword })
.then(res => {
this.$set(this.formData.reagentsList[index], 'chemicalList', res.content || []);
this.searchLoading = false;
})
.catch(() => {
this.searchLoading = false;
});
}, 800);
},
saveData() {
this.$refs.form.validate().then(next => {
if (!next) return;
this.$store.commit('setLoading', true);
let data = this.commonMethods.concatObject({}, this.formData);
data.reagentsList.forEach(item => {
delete item.chemicalList;
});
data.reagentsJson = JSON.stringify(data.reagentsList);
delete data.reagentsList;
delete data.id;
// console.log(data);
this.commonMethods.emitAjax({
path: this.ajaxPath.submit,
type: 'POST',
data,
success: () => {
this.$store.commit('setLoading', false);
this.$Message.success('提交成功');
this.$router.back();
},
error: err => {
this.setApplyToken();
this.$store.commit('setLoading', false);
!err.message && this.$Message.error('提交失败');
}
});
});
},
labSelectOpen(flag) {
if (flag && !this.labList.length) {
this.getLabList();
}
},
/**
* 通过权限点判断请求接口,默认课题组角色
*/
getLabList() {
let data = { page: -1 };
this.commonMethods.connectObject(data, { purpose: this.formData.purpose });
this.commonMethods.emitAjax({
path: this.ajaxPath.lab_list,
data,
success: res => {
this.labList = res || [];
},
error: err => {
!err.message && this.$Message.error('获取实验室失败');
}
});
},
delItem(index) {
this.formData.reagentsList.splice(index, 1);
}
}
};
</script>
<template> <Layout class="rightContent"> <Content> <div class="my-page"> <Form ref="form" :model="formData" :rules="rules" :label-width="80"> <FormItem label="申请人"> <span>{{ this.userInfo.name }}</span> </FormItem> <FormItem label="申购单位"> <span>{{ this.userInfo.orgName }}</span> </FormItem> <FormItem label="联系电话" prop="tel"> <Input v-model.number="formData.tel" placeholder="请输入联系电话" /> </FormItem> <FormItem label="邮箱" prop="email"> <Input v-model="formData.email" placeholder="请输入邮箱" /> </FormItem> <FormItem label="用途" prop="purpose"> <RadioGroup v-model="formData.purpose" @on-change="purposeChange"> <Radio v-for="val in commonConst.purposeVal" :key="val" :label="val"> {{ commonConst.purposeName[val] }} </Radio> </RadioGroup> </FormItem> <FormItem label="申购理由" prop="reason"> <Input type="textarea" v-model="formData.reason" placeholder="请输入" /> </FormItem> <FormItem label="试剂信息" prop="reagentsList"> <Button type="success" @click="addItem">添加</Button> <!-- <Button type="success">导入</Button> --> <Table :columns="column" :data="formData.reagentsList" size="small" :disabled-hover="true" border style="margin-top:10px;max-width:900px;" > <template #chemicalId="{index}"> <FormItem :prop="'reagentsList.' + index + '.chemicalId'" :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }" > <Select v-model="formData.reagentsList[index].chemicalId" :loading="searchLoading" @on-query-change="onQueryChange($event, index)" remote filterable transfer placeholder="请输入试剂名称或cas号" > <Option v-for="item in formData.reagentsList[index].chemicalList" :value="item.id" :key="item.id" :label="item.name" ></Option> </Select> </FormItem> </template> <template #spec="{index}"> <FormItem :prop="'reagentsList.' + index + '.spec'" :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }" > <i-input v-model.number="formData.reagentsList[index].spec" placeholder="请输入" style="top:0"> <Select v-model="formData.reagentsList[index].specUnit" slot="append" style="width: 70px" transfer> <Option v-for="val in commonConst.specUnitVal" :value="val" :key="val"> {{ commonConst.specUnitName[val] }} </Option> </Select> </i-input> </FormItem> </template> <template #purity="{index}"> <FormItem :prop="'reagentsList.' + index + '.purity'" :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }" > <Select v-model="formData.reagentsList[index].purity" transfer placeholder="请选择"> <Option v-for="val in commonConst.purityVal" :value="val" :key="val"> {{ commonConst.purityName[val] }} </Option> </Select> </FormItem> </template> <template #number="{index}"> <FormItem :prop="'reagentsList.' + index + '.number'" :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }" > <Input v-model.number="formData.reagentsList[index].number" placeholder="请输入" /> </FormItem> </template> <template #labId="{index}"> <FormItem :prop="'reagentsList.' + index + '.labId'" :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }" > <Select v-model="formData.reagentsList[index].labId" @on-open-change="labSelectOpen" transfer placeholder="请选择" > <Option v-for="item in labList" :value="item.id" :key="item.id"> {{ item.orgName }} </Option> </Select> </FormItem> </template> <template #action="{index}"> <span class="btn-a" style="color:red;" @click="delItem(index)">删除</span> </template> </Table> </FormItem> <FormItem> <Button type="primary" @click="saveData">保存</Button> <Button @click="$router.back()">取消</Button> </FormItem> </Form> <Spin fix v-if="loading"></Spin> </div> </Content> </Layout> </template>
<script> export default { name: 'apply-buy-edit', inject: ['systemRole'], data() { let column = [ { title: '序号', width: 50, align: 'center', type: 'index' }, { title: '试剂名称 | cas号', slot: 'chemicalId', minWidth: 150 }, { title: '规格', slot: 'spec', minWidth: 130 }, { title: '纯度', slot: 'purity', minWidth: 90 }, { title: '数量', slot: 'number', minWidth: 90 }, { title: '所属实验室', slot: 'labId', minWidth: 150 }, { title: '操作', slot: 'action', width: 60, align: 'center' } ]; return { rules: { tel: { type: 'number', required: true, message: '请输入联系电话' }, email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' } ], purpose: { type: 'number', required: true, message: '请选择用途' }, reagentsList: { type: 'array', required: true, message: '请填写试剂信息' } }, formData: { purpose: 2, reagentsList: [ { chemicalId: '', //试剂id spec: '', //规格 specUnit: 1, //规格单位，1g/瓶、2ml/瓶、3g/袋、4g/桶 purity: '', //纯度，1分析纯、2化学纯、3优级纯、4色谱纯、99其他 number: '', //数量 labId: '', //所属实验室 // expiryDate:'', //有效期至 chemicalList: [] } ] }, column, labList: [], searchLoading: false, timer: null, loading: false, userInfo: {} }; }, computed: { ajaxPath() { return { submit: '/api/my_purchase_apply/apply', lab_list: '/api/common_api/lab_list' }; } }, created() { this.setApplyToken(); if (this.$route.params.id && this.$route.params.id != 'add') { this.loadData(); } else { this.$store.dispatch('getUserInfo').then(res => { this.$set(this.formData, 'tel', Number(res.mobile)); this.$set(this.formData, 'email', res.email); this.$set(this.formData, 'orgId', res.unit); this.$set(this.userInfo, 'name', res.name); this.$set(this.userInfo, 'orgName', res.department); }); } }, methods: { purposeChange() { this.formData.reagentsList.forEach(item => (item.labId = '')); this.labList = []; }, //初始化数据 loadData() { this.loading = true; this.commonMethods.emitAjax({ path: `/api/purchase_apply/${this.$route.params.id}`, success: res => { this.loading = false; this.$set(this.formData, 'tel', Number(res.user.mobile)); this.$set(this.formData, 'email', res.user.email); this.$set(this.formData, 'orgId', res.user.unit); this.$set(this.formData, 'reason', res.reason); this.$set(this.formData, 'purpose', res.purpose); this.$set(this.userInfo, 'name', res.user.name); this.$set(this.userInfo, 'orgName', res.orgName); this.getReagentList(res); }, error: err => { this.loading = false; !err.message && this.$Message.error('获取详情失败'); } }); }, // 获取试剂信息 getReagentList(data) { this.commonMethods.emitAjax({ path: `/api/purchase_apply/${this.$route.params.id}/reagent_list`, success: res => { if (res && res.length) { this.labList = [{ id: data.labId, orgName: data.labName }]; let arr = res.map(item => { return { chemicalId: item.chemicalId, //试剂id spec: item.spec, //规格 specUnit: item.specUnit, //规格单位，1g/瓶、2ml/瓶、3g/袋、4g/桶 purity: item.purity, //纯度，1分析纯、2化学纯、3优级纯、4色谱纯、99其他 number: item.number, //数量 labId: data.labId, //所属实验室 chemicalList: [{ id: item.chemicalId, name: item.chemical.name }] }; }); this.$set(this.formData, 'reagentsList', arr); } }, error: err => { !err.message && this.$Message.error('获取试剂信息失败'); } }); }, setApplyToken() { this.$store.dispatch('getSubmitToken').then(applyToken => { this.$set(this.formData, 'applyToken', applyToken); }); }, addItem() { this.formData.reagentsList.push({ chemicalId: '', spec: '', specUnit: 1, purity: '', number: '', labId: '' }); }, onQueryChange(searchKeyword, index) { if (this.timer) clearTimeout(this.timer); this.searchLoading = true; this.timer = setTimeout(() => { this.$store .dispatch('getChemicalList', { searchKeyword }) .then(res => { this.$set(this.formData.reagentsList[index], 'chemicalList', res.content || []); this.searchLoading = false; }) .catch(() => { this.searchLoading = false; }); }, 800); }, saveData() { this.$refs.form.validate().then(next => { if (!next) return; this.$store.commit('setLoading', true); let data = this.commonMethods.concatObject({}, this.formData); data.reagentsList.forEach(item => { delete item.chemicalList; }); data.reagentsJson = JSON.stringify(data.reagentsList); delete data.reagentsList; delete data.id; // console.log(data); this.commonMethods.emitAjax({ path: this.ajaxPath.submit, type: 'POST', data, success: () => { this.$store.commit('setLoading', false); this.$Message.success('提交成功'); this.$router.back(); }, error: err => { this.setApplyToken(); this.$store.commit('setLoading', false); !err.message && this.$Message.error('提交失败'); } }); }); }, labSelectOpen(flag) { if (flag && !this.labList.length) { this.getLabList(); } }, /** * 通过权限点判断请求接口,默认课题组角色 */ getLabList() { let data = { page: -1 }; this.commonMethods.connectObject(data, { purpose: this.formData.purpose }); this.commonMethods.emitAjax({ path: this.ajaxPath.lab_list, data, success: res => { this.labList = res || []; }, error: err => { !err.message && this.$Message.error('获取实验室失败'); } }); }, delItem(index) { this.formData.reagentsList.splice(index, 1); } } }; </script>
<style lang="less" scoped></style> 标签：set,form,res,formData,编辑表格,item,reagentsList,data,iview From： https://www.cnblogs.com/rensk/p/16868669.html