溯源码页面搭建，首页样式调整

Administrator

2022-05-20 3d3d9d2768fc078f3ce9554b3c04a7c8e45f29bc

溯源码页面搭建，首页样式调整

 public/img/code.png

 src/api/traceability/traceability.js

New file
@@ -0,0 +1,49 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
    return request({
        url: '/api/traceability/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
}

export const getDetail = (id) => {
    return request({
        url: '/api/traceability/detail',
        method: 'get',
        params: {
            id
        }
    })
}

export const remove = (ids) => {
    return request({
        url: '/api/traceability/remove',
        method: 'post',
        params: {
            ids,
        }
    })
}

export const save = (row) => {
    return request({
        url: '/api/traceability/save',
        method: 'post',
        data: row
    })
}

export const update = (row) => {
    return request({
        url: '/api/traceability/submit',
        method: 'post',
        data: row
    })
}

 src/router/views/index.js

@@ -162,6 +162,20 @@
        }]
    },
    {
        path: '/traceability',
        component: Layout,
        redirect: '/traceability/index',
        children: [{
            path: 'index',
            name: '溯源码管理',
            meta: {
                i18n: 'traceability'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/traceability/traceability')
        }]
    },
    {
        path: '/info',
        component: Layout,
        redirect: '/info/index',

 src/views/farmplant/farmproductstock.vue

@@ -128,7 +128,6 @@
              },
            ],
          },
          
          {
            label: "采收时间",
            prop: "time",

 src/views/traceability/addTraceability.vue

New file
@@ -0,0 +1,572 @@
<template>
  <el-dialog
    :title="title"
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    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="否">
              </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">提 交</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import { save } from "@/api/traceability/traceability";
import { getList} from "@/api/farmplant/recovery";
export default {
  data() {
    return {
      tip:"下一步",
      isShow: false,
      isBind: false,
      wtjc: false,
      zwjc: true,
      nbjc: false,
      zwcn: false,
      radio: "1",
      title: "创建溯源码",
      form: {},
      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" },
        ],
      },
      option: {
        tip: false,
        height: 400,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        addBtn: false,
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: false,
        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,
    }),
  },
  methods: {
    changeCheckBox(data) {},
    //委托检测
    wtChange(data) {
      this.wtjc = data;
    },
    //自我检测
    zwChange(data) {
      this.zwjc = data;
    },
    //内部质量控制
    nbChange(data) {
      this.nbjc = data;
    },
    //自我承诺
    cnChange(data) {
      this.zwcn = data;
    },
    //创建溯源码
    submit() {
      var that = this;
      if(this.isBind){
        this.formLabelAlign['bind'] = "0";
      }else{
        this.formLabelAlign['bind'] = "1";
      }
      
      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.$refs.formLabelAlign.resetFields();
              that.visible = false;
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //下一步
    next() {
      this.$refs["formLabelAlign"].validate((valid) => {
        if (valid) {
          this.isShow = true;
          this.isBind = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //计算当前时间
    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;
      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>

 src/views/traceability/traceability.vue

New file
@@ -0,0 +1,324 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleCreateTraceability"
          >创建溯源码
        </el-button>
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
    <!-- 种养品 -->
    <addTraceability v-if="addTraceabilityVisible" ref="addTraceability" @refreshOnLoad="onLoad"></addTraceability>
  </basic-container>
</template>

<script>
import { getDetail, getList, update, remove, save } from "@/api/traceability/traceability";
import { mapGetters } from "vuex";
import addTraceability from "./addTraceability.vue";
export default {
  components: {
    addTraceability
  },
  data() {
    return {
      addTraceabilityVisible: false,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      landList:[],
      option: {
        tip: false,
        height: "auto",
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: true,
        searchShow: true,
        searchMenuSpan: 6,
        addBtn:false,
        column: [
          {
            label: "溯源码图片",
            prop: "url",
            span: 12,
            labelWidth: 145,
            
            rules: [
              {
                required: true,
                message: "请输入溯源码图片",
                trigger: "blur",
              },
            ],
            disabled:true,
          },
          {
            label: "溯源码编号",
            prop: "code",
            search:true,
            searchSpan:4,
            searchLabelWidth:100,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入溯源码编号",
                trigger: "blur",
              },
            ],
            disabled:true,
          },
          {
            label: "是否绑定溯源",
            prop: "bind",
            span: 12,
            labelWidth: 145,
            searchLabelWidth:110,
            type: "select",
            search:true,
            searchSpan:4,
            value:"0",
            dicData:[
              {
                label:"是",
                value:"0"
              },
              {
                label:"否",
                value:"1"
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择是否绑定溯源",
                trigger: "click",
              },
            ],
          },
          {
            label: "创建时间",
            prop: "createTime",
            addDisplay:false,
            editDisplay:false,
            span: 12,
            labelWidth: 145,
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            rules: [
              {
                required: true,
                message: "请选择创建时间时间",
                trigger: "click",
              },
            ],
          },
          
        ],
      },
      data: [],
    };
  },
  created() {
    this.initData();
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {},
  methods: {
    //创建溯源码按钮
    handleCreateTraceability(){
      this.addTraceabilityVisible = true;
      this.$nextTick(() => {
        this.$refs.addTraceability.init();
      });
    },
    //初始化数据
    initData(){
    },
    //新增
    rowSave(row, done, loading) {
      row['farmType'] = 0;
      row['createUser'] = this.userInfo.user_id;
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
    },
    //删除
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    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;
      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>
</style>

 src/views/wel/index.vue

@@ -196,25 +196,16 @@
        that.countStatis = data;
        that.option.data.push(
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: data.zarea + "亩",
            decimals: 2,
            title: "地块总面积",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: data.sarea + "亩",
            decimals: 2,
            title: "当前种养面积",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: data.num + "种",
            title: "当前种养品种",
          }