1、销售弹窗与联动省市弹窗增加

zengh

2022-06-30 b545b9167961bbf9a8499d9d19f5bc5354f142cd

1、销售弹窗与联动省市弹窗增加

 package-lock.json

@@ -2984,6 +2984,11 @@
            "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
            "dev": true
        },
        "china-area-data": {
            "version": "5.0.1",
            "resolved": "https://registry.npmmirror.com/china-area-data/-/china-area-data-5.0.1.tgz",
            "integrity": "sha512-BQDPpiv5Nn+018ekcJK2oSD9PAD+E1bvXB0wgabc//dFVS/KvRqCgg0QOEUt3vBkx9XzB5a9BmkJCEZDBxVjVw=="
        },
        "chokidar": {
            "version": "3.5.3",
            "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
@@ -4651,6 +4656,15 @@
            "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
            "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
            "dev": true
        },
        "element-china-area-data": {
            "version": "5.0.2",
            "resolved": "https://registry.npmmirror.com/element-china-area-data/-/element-china-area-data-5.0.2.tgz",
            "integrity": "sha512-vLQuvOKJy/uiX7MRHEk3x/j09hipuIl6DJ/C4XFUG7D7Pj3O47sy+Y6aAArM6k9v8cD9UX6e+yz2S4J+IPnZ8g==",
            "requires": {
                "china-area-data": "^5.0.1",
                "lodash-es": "^4.17.15"
            }
        },
        "element-ui": {
            "version": "2.15.8",
@@ -7467,6 +7481,11 @@
            "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
        },
        "lodash-es": {
            "version": "4.17.21",
            "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
        },
        "lodash.debounce": {
            "version": "4.0.8",
            "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",

 package.json

@@ -16,17 +16,18 @@
        "babel-polyfill": "^6.26.0",
        "classlist-polyfill": "^1.2.0",
        "crypto-js": "^4.0.0",
        "echarts": "^5.0.2",
        "element-china-area-data": "^5.0.2",
        "element-ui": "^2.15.6",
        "jquery": "^3.6.0",
        "js-base64": "^2.5.1",
        "js-cookie": "^2.2.0",
        "ol": "^6.5.0",
        "olcs": "^2.12.0",
        "js-md5": "^0.7.3",
        "echarts": "^5.0.2",
        "mockjs": "^1.0.1-beta3",
        "node-gyp": "^5.0.6",
        "nprogress": "^0.2.0",
        "ol": "^6.5.0",
        "olcs": "^2.12.0",
        "portfinder": "^1.0.23",
        "script-loader": "^0.7.2",
        "vue": "^2.6.10",

 src/views/farmplant/farmproductstock.vue

@@ -19,20 +19,21 @@
    <div class="table">
      <div class="content">
        <div class="farm" v-for="(item, index) in data" :key="index">
          <div class="farm-img"><img :src="item.url" class="img" /></div>
          <div class="farm-img"><img :src="item.url" class="img"/></div>
          <!-- <div class="farm-img">
            <img src="../../../public/img/map.png" class="img" />
          </div> -->
          <div class="cai">{{item.strainName}}</div>
          <div class="area">库存量：<span>{{item.weight}}</span>公斤</div>
          <div class="btn">
              <el-button plain size="small" 
                ><span style="color: #5abf78">销售</span></el-button
              >
              <el-button plain size="small" 
                >库存损耗</el-button
              >
            </div>
            <el-button plain size="small" @click="visible = true"
            ><span style="color: #5abf78">销售</span></el-button
            >
            <el-button plain size="small"
            >库存损耗
            </el-button
            >
          </div>
        </div>
      </div>
    </div>
@@ -49,177 +50,231 @@
      >
      </el-pagination>
    </div>

    <el-dialog
      title="销售"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      @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-cascader
            style="width: 100%;"
            placeholder="请选择销售去向"
            size="large"
            :options="options"
            v-model="selectedOptions">
          </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>
    </el-dialog>
  </div>

</template>

<script>
import {
  getDetail,
  getList,
  update,
  remove,
  save,
} from "@/api/farmplant/farmproductstock";
import { getStrainList } from "@/api/farmplant/strain";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
  import {
    getDetail,
    getList,
    update,
    remove,
    save,
  } from "@/api/farmplant/farmproductstock";
  import {getStrainList} from "@/api/farmplant/strain";
  import {mapGetters} from "vuex";
  import {regionData} from 'element-china-area-data'

  export default {
    data() {
      return {
        options: regionData,
        selectedOptions: [],
        formInline: {
          user: "",
          region: "",
        },
        form: {},
        visible: false,
        value: true,
        page: {
          pageSize: 16,
          currentPage: 1,
          total: 0,
        },
        selectionList: [],
        data: [],
      };
    },
    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(",");
      },
      visible: true,
      value: true,
      page: {
        pageSize: 16,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      data: [],
    };
  },
  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() {},
  created(){
    this.initData();
    //初始化列表数据
    this.onLoad(this.page);
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    mounted() {
    },
    initData() {
      // var that = this;
      //获取农产品数据
      // getStrainList(0).then((res) => {
      //   if (res.data.code == 200) {
      //     var strainId = that.findObject(that.option.column, "strainId");
      //     strainId.dicData = res.data.data;
      //   }
      // });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
    created() {
      this.initData();
      //初始化列表数据
      this.onLoad(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.onLoad(this.page);
    methods: {
      onSubmit() {
        console.log("submit!");
      },
      initData() {
        // var that = this;
        //获取农产品数据
        // getStrainList(0).then((res) => {
        //   if (res.data.code == 200) {
        //     var strainId = that.findObject(that.option.column, "strainId");
        //     strainId.dicData = res.data.data;
        //   }
        // });
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.onLoad(this.page);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.onLoad(this.page);
      },
      onLoad(page, params = {}) {
        params['tenantId'] = this.userInfo.tenant_id;
        params['deptId'] = this.userInfo.dept_id;
        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();
        });
      },
    },
    onLoad(page, params = {}) {
      params['tenantId'] = this.userInfo.tenant_id;
      params['deptId'] = this.userInfo.dept_id;
      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" scoped>
.body {
  background-color: #fff;
  width: 98%;
  height: 95%;
  margin: 0 auto;
  .body {
    background-color: #fff;
    width: 98%;
    height: 95%;
    margin: 0 auto;

  .search {
    padding-top: 20px;
    padding-left: 30px;
  }
    .search {
      padding-top: 20px;
      padding-left: 30px;
    }

  .table {
    .content {
      width: 99%;
      height: auto;
      min-height: 630px;
      margin: 0 auto;
      word-wrap: break-word;
      word-break: break-all;
    .table {
      .content {
        width: 99%;
        height: auto;
        min-height: 630px;
        margin: 0 auto;
        word-wrap: break-word;
        word-break: break-all;

      .farm {
        width: 168px;
        height: 277px;
        background-color: #f7f9fb;
        border-radius: 5px;
        margin-left: 30px;
        margin-top: 30px;
        float: left;

        .farm-img {
        .farm {
          width: 168px;
          height: 168px;
          height: 277px;
          background-color: #f7f9fb;
          border-radius: 5px;
          margin-left: 30px;
          margin-top: 30px;
          float: left;

          .img {
          .farm-img {
            width: 168px;
            height: 168px;
            border-radius: 8px 8px 0px 0px;

            .img {
              width: 168px;
              height: 168px;
              border-radius: 8px 8px 0px 0px;
            }
          }
        }

        .cai {
          text-align: center;
          font-size: 18px;
          font-weight: 550;
          margin-top: 8px;
          color: #5abf78;
        }
          .cai {
            text-align: center;
            font-size: 18px;
            font-weight: 550;
            margin-top: 8px;
            color: #5abf78;
          }

        .area {
          text-align: center;
          font-size: 14px;
          margin-top: 5px;
          color: #333333;

          span{
            font-size: 15px;
          .area {
            text-align: center;
            font-size: 14px;
            margin-top: 5px;
            color: #333333;
          }
        }

        .btn {
            span {
              font-size: 15px;
              color: #333333;
            }
          }

          .btn {
            text-align: center;
            margin-top: 8px;
          }


        }
      }
    }
  }

  .el-page{
    padding-top: 30px;
    text-align: center;
    .el-page {
      padding-top: 30px;
      text-align: center;
    }
  }
}

</style>