<template>
|
<el-dialog
|
:title="title"
|
:modal-append-to-body="false"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
@close="close"
|
width="60%"
|
:visible.sync="visible"
|
center
|
>
|
<div class="traceablility-body" v-if="!isShow">
|
<div class="form">
|
<div class="left">
|
<div class="code">
|
<div class="title">承诺达标合格证</div>
|
<div style="width: 90%; margin: 0 auto; padding-top: 5px">
|
<el-divider content-position="center">{{
|
formLabelAlign.certificationCode == ""
|
? ""
|
: formLabelAlign.certificationCode
|
}}</el-divider>
|
</div>
|
<div style="width: 90%; margin: 0 auto">
|
<div style="font-size: 14px; font-weight: 550">
|
我承诺对生产销售的食用农产品：
|
</div>
|
<div>
|
<div style="width: 65%; float: left; font-size: 12px">
|
<div style="margin-top: 5px">
|
<input type="radio" v-model="radio" value="1" />
|
男不使用禁用农药兽药、停用兽药和非法添加物
|
</div>
|
<div style="margin-top: 3px">
|
<input type="radio" v-model="radio" value="1" />
|
常规农药兽药残留不超标
|
</div>
|
<div style="margin-top: 3px">
|
<input type="radio" v-model="radio" value="1" />
|
对承诺的真实性负责
|
</div>
|
<div
|
style="font-size: 14px; font-weight: 550; margin-top: 5px"
|
>
|
承诺依据：
|
</div>
|
<div style="width: 50%; float: left; margin-top: 5px">
|
<input type="checkbox" v-model="wtjc" />
|
委托检测
|
</div>
|
<div style="margin-top: 5px">
|
<input type="checkbox" v-model="zwjc" />
|
自我检测
|
</div>
|
<div style="width: 50%; float: left; margin-top: 5px">
|
<input type="checkbox" v-model="nbjc" />
|
内部质量控制
|
</div>
|
<div style="margin-top: 5px">
|
<input type="checkbox" v-model="zwcn" />
|
自我承诺
|
</div>
|
</div>
|
<div>
|
<img
|
src="../../../public/img/code.png"
|
style="width: 100px; height: 100px; margin-top: 10px"
|
/>
|
</div>
|
</div>
|
</div>
|
<div style="width: 90%; margin: 0 auto; padding-top: 40px">
|
<el-divider></el-divider>
|
</div>
|
<div style="width: 90%; margin: 0 auto" class="form-data">
|
<div class="input">
|
<div class="left">产品名称：</div>
|
<div class="rigth">{{ formLabelAlign.productName }}</div>
|
</div>
|
<div class="input">
|
<div class="left">重量/数量：</div>
|
<div class="rigth">
|
{{
|
formLabelAlign.weight == ""
|
? ""
|
: formLabelAlign.weight + "公斤"
|
}}
|
</div>
|
</div>
|
<div class="input">
|
<div class="left">产地：</div>
|
<div class="rigth">{{ formLabelAlign.space }}</div>
|
</div>
|
<div class="input">
|
<div class="left">联系方式：</div>
|
<div class="rigth">{{ formLabelAlign.phone }}</div>
|
</div>
|
<div class="input">
|
<div class="left">生产者盖章或签名：</div>
|
<div class="rigth"></div>
|
</div>
|
<div class="input">
|
<div class="left">开具日期：</div>
|
<div class="rigth">{{ formLabelAlign.createTime }}</div>
|
</div>
|
<div class="input">
|
<div class="left"></div>
|
<div class="rigth"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<el-form
|
:label-position="labelPosition"
|
label-width="100px"
|
:model="formLabelAlign"
|
:rules="rules"
|
ref="formLabelAlign"
|
>
|
<el-form-item label="农产品名称" prop="productName">
|
<el-input v-model="formLabelAlign.productName"></el-input>
|
</el-form-item>
|
<el-form-item label="开具日期" prop="createTime">
|
<el-date-picker
|
v-model="formLabelAlign.createTime"
|
type="date"
|
value-format="yyyy-MM-dd"
|
placeholder="请选择开具日期"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="重量/数量" prop="weight">
|
<el-input v-model="formLabelAlign.weight"></el-input>
|
</el-form-item>
|
<el-form-item label="联系方式" prop="phone">
|
<el-input v-model="formLabelAlign.phone"></el-input>
|
</el-form-item>
|
<el-form-item label="产地" prop="space">
|
<el-input v-model="formLabelAlign.space"></el-input>
|
</el-form-item>
|
<el-form-item label="合格证编号" prop="certificationCode">
|
<el-input v-model="formLabelAlign.certificationCode"></el-input>
|
</el-form-item>
|
<el-form-item label="承诺依据" prop="according">
|
<el-checkbox-group
|
v-model="formLabelAlign.according"
|
@change="changeCheckBox"
|
>
|
<el-checkbox
|
label="委托检测"
|
name="type"
|
@change="wtChange"
|
></el-checkbox>
|
<el-checkbox
|
label="自我检测"
|
name="type"
|
@change="zwChange"
|
></el-checkbox>
|
<el-checkbox
|
label="内部质量控制"
|
name="type"
|
@change="nbChange"
|
></el-checkbox>
|
<el-checkbox
|
label="自我承诺"
|
name="type"
|
@change="cnChange"
|
></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="是否绑定溯源" prop="bind">
|
<el-switch v-model="isBind" active-text="是" inactive-text="否" @change="OnAutoStart">
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
<div class="traceablility-table" v-if="isShow">
|
<avue-crud
|
:option="option"
|
:table-loading="loading"
|
:data="data"
|
:page.sync="page"
|
v-model="form"
|
ref="crud"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@refresh-change="refreshChange"
|
@on-load="onLoad"
|
></avue-crud>
|
</div>
|
<div class="traceability-btn">
|
<el-button type="primary" @click="next" v-if="isBind">{{
|
tip
|
}}</el-button>
|
<!-- <el-button type="primary" @click="submit" v-if="isBtn">提 交</el-button> -->
|
<el-button type="primary" @click="submit0" v-if="!isBind">提 交</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import { save } from "@/api/traceability/traceability";
|
import { getList } from "@/api/farmplant/recovery";
|
import { getStrainList } from "@/api/farmplant/strain";
|
import { getLandList } from "@/api/land/land";
|
export default {
|
data() {
|
return {
|
selectionList: [],
|
tip: "下一步",
|
isShow: false,
|
isBind: false,
|
isBtn: 1,
|
wtjc: false,
|
zwjc: true,
|
nbjc: false,
|
zwcn: false,
|
radio: "1",
|
title: "创建溯源码",
|
form: {},
|
farm:{},
|
formLabelAlign: {
|
productName: "",
|
createTime: "",
|
according: ["自我检测"],
|
weight: "",
|
phone: "",
|
space: "",
|
certificationCode: "",
|
code: "",
|
},
|
visible: false,
|
rules: {
|
productName: [
|
{ required: true, message: "请输入产品名称", trigger: "blur" },
|
],
|
createTime: [
|
{
|
required: true,
|
message: "请选择开具日期",
|
trigger: "change",
|
},
|
],
|
weight: [
|
{
|
required: true,
|
message: "请输入联系重置/数量",
|
trigger: "change",
|
},
|
],
|
phone: [
|
{
|
required: true,
|
message: "请输入联系方式",
|
trigger: "change",
|
},
|
],
|
according: [
|
{
|
type: "array",
|
required: true,
|
message: "请至少选择一个承诺依据",
|
trigger: "change",
|
},
|
],
|
space: [{ required: true, message: "请输入产地", trigger: "change" }],
|
certificationCode: [
|
{ required: true, message: "请输入合格证编号", trigger: "blur" },
|
],
|
},
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
},
|
option: {
|
tip: false,
|
height: 400,
|
editBtn: false,
|
delBtn: false,
|
viewBtn: false,
|
addBtn: false,
|
menu: false,
|
menuAlign: "center",
|
align: "center",
|
selection: true,
|
searchShow: true,
|
searchMenuSpan: 6,
|
column: [
|
{
|
label: "采收品种",
|
prop: "strainId",
|
search: true,
|
searchSpan: 4,
|
span: 12,
|
type: "tree",
|
dicData: [],
|
props: {
|
label: "strainName",
|
value: "id",
|
},
|
labelWidth: 145,
|
rules: [
|
{
|
required: true,
|
message: "请输入采收品种",
|
trigger: "blur",
|
},
|
],
|
disabled: true,
|
},
|
{
|
label: "采收地块",
|
span: 12,
|
labelWidth: 145,
|
prop: "landId",
|
type: "tree",
|
search: true,
|
searchSpan: 4,
|
hide: true,
|
dicData: [],
|
props: {
|
label: "landName",
|
value: "id",
|
},
|
rules: [
|
{
|
required: true,
|
message: "请选择地块",
|
trigger: "click",
|
},
|
],
|
},
|
{
|
label: "地块",
|
prop: "landName",
|
display: false,
|
},
|
{
|
label: "采收重量/公斤",
|
prop: "weight",
|
tip: "公斤",
|
span: 12,
|
labelWidth: 145,
|
controls: false,
|
type: "number",
|
rules: [
|
{
|
required: true,
|
message: "请输入采收重量 公斤",
|
trigger: "click",
|
},
|
],
|
},
|
{
|
label: "采收时间",
|
prop: "time",
|
span: 12,
|
labelWidth: 145,
|
type: "datetime",
|
format: "yyyy-MM-dd HH:mm",
|
valueFormat: "yyyy-MM-dd HH:mm",
|
rules: [
|
{
|
required: true,
|
message: "请选择采收时间",
|
trigger: "click",
|
},
|
],
|
},
|
{
|
label: "操作人",
|
prop: "operator",
|
type: "tree",
|
dicData: [],
|
props: {
|
label: "realName",
|
value: "id",
|
},
|
span: 12,
|
labelWidth: 145,
|
rules: [
|
{
|
required: true,
|
message: "请输入操作人",
|
trigger: "click",
|
},
|
],
|
},
|
],
|
},
|
data: [],
|
};
|
},
|
computed: {
|
...mapState({
|
userInfo: (state) => state.user.userInfo,
|
$farmId: state => state.user.$farmId,
|
}),
|
},
|
methods: {
|
//委托检测
|
wtChange(data) {
|
this.wtjc = data;
|
},
|
//自我检测
|
zwChange(data) {
|
this.zwjc = data;
|
},
|
//内部质量控制
|
nbChange(data) {
|
this.nbjc = data;
|
},
|
//自我承诺
|
cnChange(data) {
|
this.zwcn = data;
|
},
|
submit0(){
|
if (this.isBind) {
|
this.formLabelAlign["bind"] = "0";
|
} else {
|
this.formLabelAlign["bind"] = "1";
|
}
|
if(this.isBtn==1){
|
this.submit();
|
}
|
if(this.isBtn==3){
|
this.submits();
|
}
|
},
|
//创建溯源码
|
submit() {
|
var that = this;
|
that.formLabelAlign['tenantId'] = this.userInfo.tenant_id;
|
that.formLabelAlign['deptId'] = this.$farmId;
|
this.$refs["formLabelAlign"].validate((valid) => {
|
if (valid) {
|
that.formLabelAlign.createTime =
|
that.formLabelAlign.createTime + " 00:00:00";
|
var according = [];
|
//承诺依据 数据格式转换
|
that.formLabelAlign.according.forEach((item) => {
|
if (item == "委托检测") {
|
according.push(0);
|
}
|
if (item == "自我检测") {
|
according.push(1);
|
}
|
if (item == "内部质量控制") {
|
according.push(2);
|
}
|
if (item == "自我承诺") {
|
according.push(3);
|
}
|
});
|
that.formLabelAlign.according = according.join(",");
|
//新增
|
save(that.formLabelAlign).then(
|
() => {
|
that.$emit("refreshOnLoad");
|
that.close();
|
that.visible = false;
|
that.isBtn = 1;
|
that.$refs.formLabelAlign.resetFields();
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
},
|
(error) => {
|
window.console.log(error);
|
}
|
);
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
//是否绑定溯源码绑定事件
|
OnAutoStart(e){
|
if(e){
|
this.isBtn = 2;
|
}else{
|
this.isBtn = 1;
|
}
|
},
|
//创建溯源码
|
submits() {
|
var that = this;
|
if (this.selectionList.length > 0 && this.selectionList.length > 1) {
|
this.$message.warning("只能绑定一个溯源");
|
return;
|
}
|
if (this.selectionList.length ==1) {
|
that.formLabelAlign['recoveryId'] = this.selectionList[0].id;
|
that.formLabelAlign['bind'] = '0';
|
}
|
that.formLabelAlign['tenantId'] = this.userInfo.tenant_id;
|
that.formLabelAlign['deptId'] = this.$farmId;
|
//新增
|
save(that.formLabelAlign).then(
|
() => {
|
that.$emit("refreshOnLoad");
|
that.visible = false;
|
that.isBtn = 1;
|
that.close();
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
},
|
(error) => {
|
window.console.log(error);
|
}
|
);
|
},
|
//关闭弹窗
|
close() {
|
//清除数据，状态回归
|
this.isShow = false;
|
this.isBind = false;
|
this.isBtn = 1;
|
this.wtjc = false;
|
this.zwjc = true;
|
this.nbjc = false;
|
this.zwcn = false;
|
this.formLabelAlign = {
|
productName: "",
|
createTime: "",
|
according: ["自我检测"],
|
weight: "",
|
phone: "",
|
space: "",
|
certificationCode: "",
|
code: "",
|
};
|
},
|
//下一步
|
next() {
|
var that = this;
|
this.$refs["formLabelAlign"].validate((valid) => {
|
if (valid) {
|
this.formLabelAlign["bind"] = "0";
|
//设置时间
|
that.formLabelAlign.createTime =
|
that.formLabelAlign.createTime + " 00:00:00";
|
var according = [];
|
//承诺依据 数据格式转换
|
that.formLabelAlign.according.forEach((item) => {
|
if (item == "委托检测") {
|
according.push(0);
|
}
|
if (item == "自我检测") {
|
according.push(1);
|
}
|
if (item == "内部质量控制") {
|
according.push(2);
|
}
|
if (item == "自我承诺") {
|
according.push(3);
|
}
|
});
|
that.formLabelAlign.according = according.join(",");
|
//修改按钮状态
|
this.isShow = true;
|
this.isBind = false;
|
this.isBtn = 3;
|
//initFormData
|
that.initFormData();
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
//初始化表格数据
|
initFormData(){
|
var that = this;
|
// //获取农地数据
|
// getLandList(this.userInfo.user_id).then((res)=>{
|
// if(res.data.code==200){
|
// var landIdcolumn = that.findObject(that.option.column,"landId");
|
// that.landList = res.data.data;
|
// landIdcolumn.dicData = res.data.data;
|
// }
|
// })
|
//获取农地数据
|
getLandList(this.$farmId).then((res)=>{
|
if(res.data.code==200){
|
var landIdcolumn = that.findObject(that.option.column,"landId");
|
that.landList = res.data.data;
|
landIdcolumn.dicData = res.data.data;
|
}
|
})
|
//获取农产品数据
|
getStrainList(0).then((res)=>{
|
if(res.data.code==200){
|
var strainId = that.findObject(that.option.column,"strainId");
|
strainId.dicData = res.data.data;
|
}
|
})
|
},
|
//计算当前时间
|
getNowTime() {
|
var date = new Date();
|
//年 getFullYear()：四位数字返回年份
|
var year = date.getFullYear(); //getFullYear()代替getYear()
|
//月 getMonth()：0 ~ 11
|
var month = date.getMonth() + 1;
|
//日 getDate()：(1 ~ 31)
|
var day = date.getDate();
|
//赋值
|
this.formLabelAlign.createTime =
|
year + "-" + this.addZero(month) + "-" + this.addZero(day);
|
},
|
//小于10的拼接上0字符串
|
addZero(s) {
|
return s < 10 ? "0" + s : s;
|
},
|
//初始化
|
init() {
|
//计算当前时间
|
this.getNowTime();
|
this.visible = true;
|
},
|
searchReset() {
|
this.query = {};
|
this.onLoad(this.page);
|
},
|
searchChange(params, done) {
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page, params);
|
done();
|
},
|
selectionChange(list) {
|
this.selectionList = list;
|
},
|
selectionClear() {
|
this.selectionList = [];
|
this.$refs.crud.toggleSelection();
|
},
|
currentChange(currentPage) {
|
this.page.currentPage = currentPage;
|
},
|
sizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
},
|
refreshChange() {
|
this.onLoad(this.page, this.query);
|
},
|
onLoad(page, params = {}) {
|
this.loading = true;
|
params["farmId"] = this.$farmId
|
getList(
|
page.currentPage,
|
page.pageSize,
|
Object.assign(params, this.query)
|
).then((res) => {
|
const data = res.data.data;
|
this.page.total = data.total;
|
this.data = data.records;
|
this.loading = false;
|
this.selectionClear();
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scope>
|
.traceablility-body {
|
width: 100%;
|
|
.form {
|
display: flex;
|
flex-direction: row;
|
.left {
|
width: 50%;
|
.code {
|
width: 60%;
|
// height: 500px;
|
margin-left: 20%;
|
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.05);
|
-webkit-box-shadow: #d4d2d2 0px 0px 10px;
|
-moz-box-shadow: #d4d2d2 0px 0px 10px;
|
|
.title {
|
padding-top: 15px;
|
font-size: 24px;
|
font-weight: 550;
|
text-align: center;
|
}
|
|
.form-data {
|
padding-top: -10px;
|
|
.input {
|
display: flex;
|
flex-flow: row nowrap;
|
justify-content: space-between;
|
margin: 0 auto;
|
padding-top: 15px;
|
|
.rigth {
|
font-size: 14px;
|
font-weight: 550;
|
}
|
}
|
}
|
}
|
}
|
.right {
|
width: 40%;
|
padding-top: 10px;
|
}
|
}
|
}
|
|
.traceability-btn {
|
text-align: center;
|
margin-top: 30px;
|
}
|
</style>
|
