order-ui-pc/src/views/purchaseIn/storeManageFlow/components/newSetStock.vue

<template>
  <div class="newApply pagePadding">
    {{ ruleForm }}
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <el-divider content-position="center">备货申请详情</el-divider>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        disabled="true"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input
                style="width: 100%"
                v-model="ruleForm.goods_name"
                placeholder="请输入内容"
                :size="searchSize"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="商品数量" prop="goods_name">
              <el-input
                style="width: 100%"
                v-model="ruleForm.goods_name"
                placeholder="请输入内容"
                :size="searchSize"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="采购数量" prop="goods_num">
              <el-input
                style="width: 100%"
                v-model="ruleForm.goods_num"
                placeholder="请输入内容"
                :size="searchSize"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最晚入库时间" prop="last_go_time">
              <el-date-picker
                style="width: 100%"
                :size="searchSize"
                v-model="ruleForm.last_go_time"
                type="date"
                value-format="timestamp"
                placeholder="选择日期"
                @change="selectTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库仓库" prop="stock_in_rule">
              <el-cascader
                placeholder="请选择入库仓库"
                filterable
                clearable
                :size="searchSize"
                v-model="ruleForm.stock_in_rule"
                :options="options"
                style="width: 100%"
                @change="
                  pageInfo.curr = 1;
                  parmValue.page = 1;
                  stockName();
                "
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="收件人" prop="consignee">
              <search-account
                :value="ruleForm.consignee"
                :size="searchSize"
                style="width: 100%"
                @searchChange="handleResignName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="mobile">
              <el-input
                v-model="ruleForm.mobile"
                placeholder="请输入电话"
                :size="searchSize"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="收货地址" prop="receivedArea">
              <select-area
                :value="ruleForm.receivedArea"
                :size="searchSize"
                :placeholder="'请输入收货地址'"
                style="width: 100%"
                @selectChange="selectArea"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="detailArea">
              <el-input
                :size="searchSize"
                v-model="ruleForm.detailArea"
                style="width: 100%"
                placeholder="详细地址"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="物流单号" prop="express_number">
              <el-input
                :size="searchSize"
                style="width: 100%"
                placeholder="物流单号"
                v-model="ruleForm.express_number"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="发货时间" prop="send_out_time">
              <el-date-picker
                style="width: 100%"
                :size="searchSize"
                v-model="ruleForm.send_out_time"
                value-format="timestamp"
                type="date"
                placeholder="选择日期"
                @change="selectOutTime"
              >
              </el-date-picker> </el-form-item
          ></el-col>
        </el-row> -->

        <!-- <el-form-item>
          <el-col :span="24" style="text-align: right; margin-top: 10px">
            <el-button type="primary" @click="save('ruleForm')"
              >保 存
            </el-button>
            <el-button type="warning" @click="submitForm('ruleForm')"
              >保 存 并 发 起 流 程
            </el-button>
          </el-col>
        </el-form-item> -->
      </el-form>
      <el-divider content-position="center">采购反馈</el-divider>
      <el-form
        :model="ruleForm"
        :rules="ruless"
        ref="ruleForm"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="出库仓库" prop="stock_go_rule">
              <el-cascader
                placeholder="请选择出库仓库"
                filterable
                clearable
                :size="searchSize"
                v-model="ruleForm.stock_go_rule"
                :options="options"
                style="width: 100%"
                @change="
                  pageInfo.curr = 1;
                  parmValue.page = 1;
                  stockName();
                "
              ></el-cascader> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="预计入库时间" prop="expect_go_stock">
              <el-date-picker
                style="width: 100%"
                :size="searchSize"
                v-model="ruleForm.expect_go_stock"
                type="date"
                value-format="timestamp"
                placeholder="选择日期"
                @change="selectTime"
              >
              </el-date-picker> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="采购数量上限" prop="goods_num_limit">
              <el-input
                style="width: 100%"
                v-model="ruleForm.goods_num_limit"
                placeholder="请输入数量上限"
                :size="searchSize"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="ruleForm.remark"
                :autosize="{ minRows: 2, maxRows: 6 }"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item>
          <el-col :span="24" style="text-align: right; margin-top: 10px">
            <el-button type="primary" @click="save('ruleForm')"
              >保 存
            </el-button>
            <el-button type="warning" @click="submitForm('ruleForm')"
              >保 存 并 发 起 流 程
            </el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
// import statusList from "@/assets/js/statusList";
// import asyncRequest from "@/apis/service/stock/newApply";
import asyncRequest from "@/apis/service/purchaseIn/storeManageFlow";
import { mapGetters } from "vuex";
import { isMobile, isAlphanumeric } from "@/utils/validate";
export default {
  name: "allotFlow",
  mixins: [mixinPage, resToken],

  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "allotFlow"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    const validatemobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空！"));
      } else {
        if (!isMobile(value)) {
          callback(new Error("手机号格式不正确！"));
        } else {
          callback();
        }
      }
    };
    const validateExpressNumber = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("物流单号不能为空！"));
      } else {
        if (!isAlphanumeric(value)) {
          callback(new Error("物流单号为6-16位数字字母组合！"));
        } else if (value.length < 6 || value.length > 16) {
          callback(new Error("物流单号为6-16位数字字母组合！"));
        } else {
          callback();
        }
      }
    };
    return {
      inTime: "",
      goTime: "",
      ruleForm: {
        goods_name: "", //商品名称
        goods_num: "", //商品数量
        last_go_time: "", //最晚入库时间
        stock_in_rule: "", //入库仓库
        goods_num_limit: "", //采购数量上限
        expect_go_time: "", //预计入库时间
        stock_go_rule: "", //出库仓库
        remark: "", //备注
      },
      rules: {
        //出入库规则
        goods_name: [
          {
            required: true,
            message: "商品名称不能为空",
            trigger: "blur",
          },
        ],
        goods_num: [
          {
            required: true,
            message: "请选择入库仓库",
            trigger: "blur",
          },
        ],
        last_go_time: [
          {
            // type: "date",
            required: true,
            message: "请输入入库最晚时间",
            // trigger: "blur" ,
            trigger: ["blur", "change"],
          },
        ],
        stock_in_rule: [
          {
            required: true,
            message: "请选择入库仓库",
            trigger: "change",
          },
        ],
        consignee: [
          {
            type: "array",
            required: true,
            message: "收货人不能为空",
            trigger: "change",
          },
        ],
        mobile: [
          {
            required: true,
            message: "电话号不能为空",
            trigger: "blur",
          },
          {
            validator: validatemobile,
          },
        ],
        receivedArea: [
          {
            type: "array",
            required: true,
            message: "收货地址不能为空",
            trigger: "change",
          },
        ],
        detailArea: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
        express_number: [
          {
            required: true,
            message: "请输入快递单号",
            trigger: "blur",
          },
          {
            validator: validateExpressNumber,
          },
        ],
        send_out_time: [
          {
            required: true,
            message: "请输发货时间",
            trigger: ["blur", "change"],
          },
        ],
      },
      ruless: {
        stock_go_rule: [
          {
            required: true,
            message: "请选择出库仓库",
            trigger: "change",
          },
        ],
        goods_num_limit: [
          {
            required: true,
            message: "请输入数量上限",
            trigger: "blur",
          },
        ],
        expect_go_stock: [
          {
            // type: "date",
            required: true,
            message: "请输入入库最晚时间",
            // trigger: "blur" ,
            trigger: ["blur", "change"],
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
      },
      loading: true,
      showModel: false,
      isDetail: false,
      modelId: 0,
      tableData: [], //渲染表格
      //
      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: [
        {
          prop: "nickname",
          label: "商品编号",
        },
        {
          prop: "role_name",
          label: "商品名称",
        },
        {
          prop: "mobile",
          label: "数量",
        },
        {
          prop: "",
          label: "操作",
          fixed: "right",
          _noset_: true,
          _slot_: "operation",
        },
      ],
      parmValue: {},
    };
  },
  methods: {
    // 选择省市区
    selectArea(e) {
      // console.log(e);
      if (e && e.length == 3) {
        this.ruleForm.receivedArea = e;
      } else {
        this.ruleForm.consignee = [];
      }
      // console.log(this.ruleForm);
      this.$refs.ruleForm.validateField("receivedArea");
    },
    // 选择收获人
    handleResignName(e) {
      if (e && e.id) {
        this.ruleForm.consignee = [e.id];
      } else {
        this.ruleForm.consignee = [];
      }
      this.$refs.ruleForm.validateField("consignee");
    },
    // 最晚入库时间选择
    selectTime(e) {
      console.log(e);
      this.ruleForm.goTime = e;
    },
    // 发货时间选择
    selectOutTime(e) {
      console.log(e);
    },
    // 保存按钮
    save(formName) {
      console.log("save");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      if (this.ruleForm.goTime < this.ruleForm.send_out_time) {
        this.$message({
          showClose: true,
          message: "最晚入库时间不能小于发货时间",
          type: "error",
        });
      }
    },
    submitForm(formName) {
      console.log("sds");
      console.log(formName);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      if (this.ruleForm.goTime < this.ruleForm.send_out_time) {
        this.$message({
          showClose: true,
          message: "最晚入库时间不能小于发货时间",
          type: "error",
        });
      }
    },
  },
  restSearch() {
    //重置入参
    this.parmValue = {};
    // this.searchList();
  },

  openModal(id, isDetail, sitem) {
    this.showModel = isDetail;
    this.modelId = id;
    this.isDetail = isDetail;
    this.sitem = sitem;
  },
  async deleteById(id, status) {
    // await this.$confirm("确定要删除？", {
    //   confirmButtonText: "确定",
    //   cancelButtonText: "取消",
    //   type: "warning",
    // })
    //   .then(async () => {
    //     const model = {
    //       id: id,
    //       status: status === "1" ? "0" : "1",
    //     };
    //     const res = await asyncRequest.status(model);
    //     if (res && res.code === 0) {
    //       this.$notify.success({
    //         title: "删除成功",
    //         message: "",
    //       });
    //       this.searchList();
    //     } else if (res && res.code >= 100 && res.code <= 104) {
    //       await this.logout();
    //     } else {
    //       this.$message.warning(res.message);
    //     }
    //   })
    //   .catch(() => {
    //     console.log("取消");
    //   });
  },
  async searchList() {
    // this.loading = true;
    // const res = await asyncRequest.list(this.parmValue);
    // if (res && res.code === 0 && res.data) {
    //   this.tableData = res.data.list;
    //   this.pageInfo.total = Number(res.data.count);
    // } else if (res && res.code >= 100 && res.code <= 104) {
    //   await this.logout();
    // } else {
    //   this.tableData = [];
    //   this.pageInfo.total = 0;
    // }
    // this.loading = false;
  },

  async statusConfirm(id, status) {
    // let str = status === "1" ? "禁用" : "启用";
    // await this.$confirm("确定要改为" + str + "?", {
    //   confirmButtonText: "确定",
    //   cancelButtonText: "取消",
    //   type: "warning",
    // })
    //   .then(async () => {
    //     this.loading = true;
    //     const model = {
    //       id: id,
    //       status: status === "1" ? "0" : "1",
    //     };
    //     const res = await asyncRequest.status(model);
    //     if (res && res.code === 0) {
    //       this.loading = false;
    //       this.$notify.success({
    //         title: "状态修改成功！",
    //         message: "",
    //       });
    //       await this.searchList();
    //     } else if (res && res.code >= 100 && res.code <= 104) {
    //       await this.logout();
    //     } else {
    //       this.$message.warning(res.message);
    //     }
    //   })
    //   .catch(() => {
    //     console.log("取消");
    //   });
  },
  async stockName(isShowModal = false) {
    //获取多级仓库名称的方法
    const res = await asyncRequest.listAll(this.parmValue);
    console.log(res.data);
    // this.openModal("005", true);
    // console.log(this.selectStock_go);
    // console.log(this.selectStock_in);
    // this.options = res.data;
    // console.log(this.options);
    let arr = res.data;
    // console.log(arr);
    arr.forEach((ele) => {
      //重新封装后台传递来的数据,转换格式
      let item = {
        value: ele.id,
        label: ele.name,
        children: [],
      };
      ele.child.forEach((elem) => {
        let model = {
          value: elem.id,
          label: elem.name,
        };
        item.children.push(model);
      });
      this.options.push(item);
    });
    this.options.forEach((ele) => {
      //从数据表中筛选出我们要用的数据
      if (ele.value === this.selectStock_go[0]) {
        ele.children.forEach((elem) => {
          if (elem.value === this.selectStock_go[1]) {
            this.stock_go = ele.label + "/" + elem.label;
          }
        });
      }
      if (ele.value === this.selectStock_in[0]) {
        ele.children.forEach((elem) => {
          if (elem.value === this.selectStock_in[1]) {
            this.stock_in = ele.label + "/" + elem.label;
          }
        });
      }
    });
    if (this.selectStock_in != "" || this.selectStock_go != "") {
      console.log("选择了一个项目");
      this.openModal("005", isShowModal);
    }
    console.log(this.stock_go);
    console.log(this.stock_in);
    //   if(){

    //   }
    // console.log(this.pageInfo.total);

    this.compareStock(); //比较出库仓库和入库仓库是否相同
  },

  compareStock() {
    //比较出库仓库和入库仓库是否相同
    if (
      this.stock_go === this.stock_in &&
      this.stock_go !== "" &&
      this.stock_go != ""
    ) {
      console.log("出库仓库和入库仓库相同");
      this.$message({
        message: "出库仓库不能和入库仓库相同",
        type: "error",
      });
    }
  },
};
</script>
<style lang="scss" >
</style>