1、接口对接，增加库存判断，省市县对接 2、样式调整，修改为avue加载，增加判空条件，增加尾部图标 3、库存损耗

zengh

2022-06-30 f7791e81efb86d876aec23aeaa17fde3ff3efcaf

1、接口对接，增加库存判断，省市县对接
2、样式调整，修改为avue加载，增加判空条件，增加尾部图标
3、库存损耗

 src/views/farmplant/farmproductstock.vue

@@ -26,14 +26,23 @@
          <div class="cai">{{item.strainName}}</div>
          <div class="area">库存量：<span>{{item.weight}}</span>公斤</div>
          <div class="btn">
            <el-button plain size="small" @click="visible = true"
            ><span style="color: #5abf78">销售</span></el-button
            <el-button style="width: 65px;" plain size="small" @click="openWindow(0,item)">
              <span style="color: #5abf78">销售</span></el-button
            >
            <el-button plain size="small"
            >库存损耗
            <el-button style="width: 65px;padding-left:8px" plain size="small" @click="openWindow(1,item)">
              <span>库存损耗</span>
            </el-button
            >
          </div>
<!--          <div class="btn">-->
<!--            <el-button style="width: 65px;" plain size="small"-->
<!--            ><span style="color: #5abf78">出库</span></el-button-->
<!--            >-->
<!--            <el-button style="width: 65px;" plain size="small">-->
<!--              加工-->
<!--            </el-button-->
<!--            >-->
<!--          </div>-->
        </div>
      </div>
    </div>
@@ -52,50 +61,122 @@
    </div>

    <el-dialog
      title="销售"
      title="农产品销售"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="cleanData"
      @close="close"
      width="30%"
      :visible.sync="visible"
      center
    >
      <el-form :model="form" label-width="auto">
        <el-form-item label="种养品种" required>
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="销售时间" required>
          <el-date-picker type="date" placeholder="请选择销售时间" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="销售数量" required style="margin-bottom: 0px">
          <el-input><i slot="suffix" style="font-style:normal;margin-right: 10px;">公斤</i></el-input>
          <div style="text-align: right;color: #ffb218">可销售量：1公斤</div>
        </el-form-item>
        <el-form-item label="销售去向" required>
      <!--      <el-form :model="form" label-width="auto">-->
      <!--        <el-form-item label="种养品种" required>-->
      <!--          <el-input disabled v-model="form.strainName"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="销售时间" required>-->
      <!--          <el-date-picker v-model="form.saleTime" type="date" placeholder="请选择销售时间"-->
      <!--                          style="width: 100%;"></el-date-picker>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="销售数量" required style="margin-bottom: 0px">-->
      <!--          <el-input type="number" required="required" v-model="form.saleNum"><i slot="suffix"-->
      <!--                                                                                style="font-style:normal;margin-right: 10px;">公斤</i>-->
      <!--          </el-input>-->
      <!--          <div style="text-align: right;color: #ffb218">可销售量：{{form.weight}}公斤</div>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="销售去向" required>-->
      <!--          <el-cascader-->
      <!--            style="width: 100%;"-->
      <!--            placeholder="请选择销售去向"-->
      <!--            size="large"-->
      <!--            :options="options"-->
      <!--            v-model="selectedOptions">-->
      <!--          </el-cascader>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="销售价格">-->
      <!--          <el-input type="number" v-model="form.salePrice"><i slot="suffix"-->
      <!--                                                              style="font-style:normal;margin-right: 10px;">元/公斤</i>-->
      <!--          </el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="品牌">-->
      <!--          <el-input v-model="form.saleBrand"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="操作人" required>-->
      <!--          <el-tag type="success">{{form.name}}</el-tag>-->
      <!--        </el-form-item>-->
      <!--        <div style="text-align: center">-->
      <!--          <el-button style="width: 120px" type="success" plain>销售</el-button>-->
      <!--        </div>-->
      <!--      </el-form>-->
      <avue-form ref="form" v-model="form" :option="option">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{form.name}}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleDestination">
          <div>
          <el-cascader
            style="width: 100%;"
            placeholder="请选择销售去向"
            size="large"
            :options="options"
            v-model="selectedOptions">
              @change="handleChange"
              v-model="saleDestination">
          </el-cascader>
        </el-form-item>
        <el-form-item label="销售价格">
          <el-input><i slot="suffix" style="font-style:normal;margin-right: 10px;">元/公斤</i></el-input>
        </el-form-item>

        <el-form-item label="品牌">
          <el-select style="width: 100%;" placeholder="您还未上传品牌信息">
          </el-select>
        </el-form-item>
        <el-form-item label="操作人" required>
          <el-tag type="success">神农6173</el-tag>
        </el-form-item>
        <div style="text-align: center">
          <el-button style="width: 120px" type="success" plain>销售</el-button>
        </div>
      </el-form>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入销售数量" v-model="form.saleNum"><i slot="suffix"style="font-style:normal;margin-right: 5px;">公斤</i></el-input>
            <div style="text-align: right;color: #ffb218">可销售量：{{form.weight}}公斤</div>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="salePrice">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入销售价格" v-model="form.salePrice"><i slot="suffix"style="font-style:normal;margin-right: 5px;">元/公斤</i>
            </el-input>
          </div>
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 120px" type="success" plain @click="submitSole">销售</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>


    <el-dialog
      title="农产品库存损耗"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="close"
      width="30%"
      :visible.sync="visibleKC"
      center
    >
      <avue-form ref="form" v-model="form" :option="optionKC">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{form.name}}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入损耗数量" v-model="form.saleNum"><i slot="suffix"style="font-style:normal;margin-right: 5px;">公斤</i></el-input>
            <div style="text-align: right;color: #ffb218">库存量：{{form.weight}}公斤</div>
          </div>
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 80px" plain >取消</el-button>
            <el-button style="width: 80px" type="success" plain >确认</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>
  </div>

@@ -109,6 +190,11 @@
    remove,
    save,
  } from "@/api/farmplant/farmproductstock";

  import {
    add
  } from "@/api/sale/sale";

  import {getStrainList} from "@/api/farmplant/strain";
  import {mapGetters} from "vuex";
  import {regionData} from 'element-china-area-data'
@@ -117,18 +203,177 @@
    data() {
      return {
        options: regionData,
        selectedOptions: [],
        formInline: {
          user: "",
          region: "",
        },
        form: {},
        form: {
          name: "",
          strainId: "",
          saleTime: "",
          saleNum: "",
          saleDestination: "",
          city: "",
          county: "",
          salePrice: "",
          createUser: "",
          saleBrand: ""
        },
        visible: false,
        visibleKC: false,
        value: true,
        page: {
          pageSize: 16,
          currentPage: 1,
          total: 0,
        },
        option: {
          emptyBtn: false,
          submitBtn: false,
          gutter: 30,
          column: [
            {
              label: "种养品种",
              prop: "strainName",
              span: 24,
              disabled: true,
              rules: [
                {
                  required: true,
                  message: "请输入种养品种",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "销售时间",
              prop: "saleTime",
              type: "date",
              span: 24,
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              rules: [
                {
                  required: true,
                  message: "请选择销售时间",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "销售数量",
              prop: "saleNum",
              type: "number",
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入销售数量",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "销售去向",
              prop: "saleDestination",
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请选择销售去向",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "销售价格",
              prop: "salePrice",
              span: 24,
              type: "number",
            },
            {
              label: "品牌",
              prop: "saleBrand",
              span: 24,
            },
            {
              label: "操作人",
              prop: "name",
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入操作人",
                  trigger: "blur",
                },
              ],
            },
          ]
        },
        optionKC: {
          emptyBtn: false,
          submitBtn: false,
          gutter: 30,
          column: [
            {
              label: "损耗品种",
              prop: "strainName",
              span: 24,
              disabled: true,
              rules: [
                {
                  required: true,
                  message: "请输入损耗品种",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "损耗时间",
              prop: "saleTime",
              type: "date",
              span: 24,
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              rules: [
                {
                  required: true,
                  message: "请选择损耗时间",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "损耗数量",
              prop: "saleNum",
              type: "number",
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入损耗数量",
                  trigger: "blur",
                },
              ],
            },
            {
              label: "备注",
              prop: "bz",
              span: 24,
            },
            {
              label: "操作人",
              prop: "name",
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入操作人",
                  trigger: "blur",
                },
              ],
            },
          ]
        },
        selectionList: [],
        data: [],
@@ -163,6 +408,33 @@
      onSubmit() {
        console.log("submit!");
      },
      submitSole() {
        var that = this;
        this.$refs.form.validate((vaild, done) => {
          if (vaild) {
            add(this.form).then(() => {
              this.onLoad(this.page);
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              //提交完成，关闭窗口清空数据
              that.cleanData();
              done();
            }, error => {
              window.console.log(error);
            });
          }
        })
      },
      handleChange(value) {
        if (value != null) {
          this.form.saleDestination = value[0];
          this.form.city = value[1];
          this.form.county = value[2];

        }
      },
      initData() {
        // var that = this;
        //获取农产品数据
@@ -172,6 +444,24 @@
        //     strainId.dicData = res.data.data;
        //   }
        // });
      },
      openWindow(index, data) {
        this.form.name = this.userInfo.nick_name;
        this.form.createUser = this.userInfo.user_id;
        this.form.weight = data.weight;
        this.form.strainId = data.strainId;
        this.form.strainName = data.strainName;
        if (index == 0) {
          this.visible = true;
        }else if(index == 1){
          this.visibleKC = true;
        }
      },
      cleanData(){
        var that = this;
        that.form.saleDestination = "";
        that.$refs.form.resetFields();
        that.visible = false;
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
@@ -201,6 +491,7 @@
</script>

<style lang="scss" scoped>

  .body {
    background-color: #fff;
    width: 98%;
@@ -223,7 +514,8 @@

        .farm {
          width: 168px;
          height: 277px;
          height: 283px;
          /*height: 315px;*/
          background-color: #f7f9fb;
          border-radius: 5px;
          margin-left: 30px;