order-ui-pc/src/views/purchaseIn/addStore/index.vue

<template>
  <div class="addStore pagePadding">
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      123{{}}
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        :rules="rulesThis"
        label-width="100px"
        class="demo-ruleForm"
        v-if="addId === 'add'"
      >
        <el-divider content-position="center">仓库信息:</el-divider>

        <el-row>
          <el-col :span="12"
            ><el-form-item
              label="所属公司"
              prop="storeToCompany"
              style="width: 100%"
            >
              <CompanySearch @searchCard="getCompanyName"></CompanySearch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="stockName">
              <el-input
                placeholder="请输入仓库名称"
                filterable
                clearable
                v-model="ruleForm.stockName"
                @change="getValue1"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- 省/市/区选择组件 -->
            <el-form-item label="省/市/区" prop="stockToArea">
              <AreaSelect @areaSelect="areaSelect"></AreaSelect>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><!-- 仓库详细地址 -->
            <el-form-item label="详细地址" prop="stockDetail">
              <el-input
                placeholder="请输入内容"
                v-model="ruleForm.stockDetail"
                clearable
                @change="stockDetail"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="stockDutyer" style="width: 100%">
              <el-select
                style="width: 100%"
                v-model="ruleForm.stockDutyer"
                placeholder="请选择仓库负责人"
                @change="getValue2"
              >
                <el-option
                  v-for="(item, index) in ruleForm.stockDutyer_options"
                  :key="index"
                  :label="item.nickname"
                  :value="item.nickname"
                >
                  <span style="float: left">{{ item.nickname }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.role_name
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="负责人电话" prop="dutyer_mobile">
              <el-input
                type="number"
                placeholder="请输入联系人电话"
                v-model="ruleForm.dutyer_mobile"
                clearable
              >
              </el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-divider content-position="center">收发货信息:</el-divider>
        <!-- 收发货联系信息 -->

        <el-row>
          <el-col :span="12"
            ><!-- 收发货联系人 -->
            <el-form-item label="联系人" prop="linker">
              <el-input
                placeholder="请填写联系人"
                v-model="ruleForm.linker"
                clearable
                @change="linker"
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <!-- 联系人电话 -->
            <el-form-item label="电话" prop="linker_mobile">
              <el-input
                type="number"
                placeholder="请输入联系人电话"
                v-model="ruleForm.linker_mobile"
                clearable
                @change="linkerMobile"
              >
              </el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <!-- 收发货地址 -->
            <el-form-item label="省/市/区" prop="linker_addr">
              <AreaSelect @areaSelect="selectArea"></AreaSelect> </el-form-item
          ></el-col>
          <el-col :span="12">
            <!-- 收发货详细地址 -->
            <el-form-item label="详细地址" prop="linker_detail">
              <el-input
                placeholder="请输入详细地址"
                v-model="ruleForm.linker_detail"
                clearable
                @change="linkerDetail"
              >
              </el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <!-- 仓库详情 -->
      <el-form
        ref="ruleForm"
        :disabled="addId === 'detail'"
        :model="ruleForm"
        status-icon
        :rules="rulesThis"
        label-width="100px"
        class="demo-ruleForm"
        v-if="addId === 'detail'"
      >
        <el-divider content-position="center">仓库信息:</el-divider>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="所属公司" prop="storeToCompany">
              <el-cascader
                placeholder="请选择所属公司"
                filterable
                clearable
                style="width: 100%"
                v-model="ruleForm.storeToCompany"
                :options="ruleForm.selectStock_go_options"
                @change="getValue"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="stockName">
              <el-input
                placeholder="请输入仓库名称"
                filterable
                clearable
                v-model="ruleForm.stockName"
                @change="getValue1"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- 省/市/区选择组件 -->
            <el-form-item label="省/市/区" prop="stockToArea">
              <AreaSelect @areaSelect="areaSelect"></AreaSelect>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><!-- 仓库详细地址 -->
            <el-form-item label="详细地址" prop="stockDetail">
              <el-input
                placeholder="请输入内容"
                v-model="ruleForm.stockDetail"
                clearable
                @change="stockDetail"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="负责人" prop="stockDutyer" style="width: 50%">
          <el-select
            style="width: 100%"
            v-model="ruleForm.stockDutyer"
            placeholder="请选择仓库负责人"
          >
            <el-option
              v-for="item in ruleForm.stockDutyer_options"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            >
              {{ item }}
              <!-- <span style="float: left">{{ item.nickname }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.role_name
              }}</span> -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-divider content-position="center">收发货信息:</el-divider>
        <!-- 收发货联系信息 -->

        <el-row>
          <el-col :span="12"
            ><!-- 收发货联系人 -->
            <el-form-item label="联系人" prop="linker">
              <el-input
                placeholder="请填写联系人"
                v-model="ruleForm.linker"
                clearable
                @change="linker"
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <!-- 联系人电话 -->
            <el-form-item label="电话" prop="linker_mobile">
              <el-input
                type="number"
                placeholder="请输入联系人电话"
                v-model="ruleForm.linker_mobile"
                clearable
                @change="linkerMobile"
              >
              </el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <!-- 收发货地址 -->
            <el-form-item label="省/市/区" prop="linker_addr">
              <AreaSelect @areaSelect="selectArea"></AreaSelect> </el-form-item
          ></el-col>
          <el-col :span="12">
            <!-- 收发货详细地址 -->
            <el-form-item label="详细地址" prop="linker_detail">
              <el-input
                placeholder="请输入详细地址"
                v-model="ruleForm.linker_detail"
                clearable
                @change="linkerDetail"
              >
              </el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>

      <el-col :span="24" style="text-align: right">
        <el-button
          v-if="addId === 'add'"
          type="primary"
          @click="submitForm('ruleForm')"
          >保 存
        </el-button>
        <el-button @click="showModelThis = false">{{
          isDetail ? "关 闭" : "取 消"
        }}</el-button>
      </el-col>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/purchaseIn/addStore";
// import resToken from "@/mixins/resToken";
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
// import statusList from "@/assets/js/statusList";
import addEdit from "./addEdit";
import { mapGetters } from "vuex";
import { isMobile } from "@/utils/validate";
export default {
  name: "addStore",
  // props: ["showModel", "id", "isDetail", "sitem"],
  // mixins: [resToken],
  mixins: [mixinPage, resToken],
  components: {
    addEdit,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "addStore"
        ) || {};
      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();
        }
      }
    };
    return {
      stockDutyer: "", //仓库负责人
      // addId: this.$route.query.id,
      addId: "",
      // route: this.$route,
      roleList: [],
      loading: false,
      title: "添加账号",
      organizeList: [],
      showModelThis: this.showModel,
      //省市区接口入参
      addr_code: {
        provice_code: "",
        city_code: "",
        area_code: "",
      },
      ruleForm: {
        storeToCompany: "",
        selectStock_go: "", //公司
        stockName: "", //仓库名称
        stockDutyer: "", //仓库负责人
        dutyer_mobile: "",
        linker: "", //收发货联系人
        linker_mobile: "", //收发货人联系电话
        linker_detail: "",
        // linker_addr: [], //收发货地址
        // stockDutyer_options: [], //仓库负责人列表
        // stockDetail: [], //仓库详细地址
        // selectStock_go_options: [], //公司列表
        // stockToArea: [],
      }, //
      rulesThis: this.rules,
      rules: {
        storeToCompany: [
          {
            // type: "array",
            required: true,
            message: "请选择仓库所在公司",
            trigger: "blur",
            // trigger: "change",
          },
        ],
        stockName: [
          {
            required: true,
            message: "请输入仓库名称",
            trigger: "blur",
          },
        ],
        stockDutyer: [
          {
            // type: "array",
            required: true,
            message: "请选择仓库负责人",
            // trigger: "change",
            trigger: "blur",
          },
        ],
        stockToArea: [
          {
            type: "array",
            required: true,
            message: "请选择仓库所在地址",
            trigger: "change",
          },
        ],
        stockDetail: [
          {
            required: true,
            message: "请选择仓库详细地址",
            trigger: "blur",
          },
        ],
        linker: [
          {
            required: true,
            message: "请填写收发货联系人",
            trigger: "blur",
          },
        ],
        linker_mobile: [
          {
            required: true,
            trigger: "blur",
            validator: validatemobile,
          },
        ],
        dutyer_mobile: [
          {
            required: true,
            trigger: "blur",
            validator: validatemobile,
          },
        ],
        linker_addr: [
          {
            type: "array",
            required: true,
            message: "请填写收发货联系人地址",
            trigger: "change",
          },
        ],
        linker_detail: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
      },
      parmValue: {
        //入参
        name: "", //仓库名称
        supplierNo: "", //供应商编码
        wsmtype: 1, //仓库类型
        addr: "", //仓库地址
        contactor: "", //仓库联系人
        mobile: "", //仓库联系方式
        position: "", //联系人职位
        wsm_name: "", //	收发货联系人
        wsm_mobile: "", //收发货联系方式
        addr_code: {
          provice_code: "",
          city_code: "",
          area_code: "",
        },
        wsm_addr: "", //地址详细
      },
    };
  },
  watch: {
    $route: function (val, old) {
      this.addId = val.query.id;
    },
  },
  mounted() {
    this.addId = this.$route.query.id;
    this.getCompany();
    this.initForm();
  },
  methods: {
    // 获取公司列表
    getCompanyName(val) {
      this.ruleForm.storeToCompany = val[1];
      console.log(this.ruleForm.storeToCompany);
    },
    // 联系人电话
    linkerMobile(val) {
      this.parmValue.wsm_mobile = val;
    },
    // 联系人
    linker(val) {
      this.parmValue.wsm_name = val;
    },
    // 仓库详细地址
    stockDetail(val) {
      console.log(val);
      this.parmValue.addr = val;
    },
    //仓库地址选择
    areaSelect(val) {
      console.log(val);
      this.ruleForm.stockToArea = val;
      this.parmValue.addr = val;
    },
    // 收发货地址选择
    selectArea(val) {
      this.parmValue.addr_code.provice_code = val[0];
      this.parmValue.addr_code.city_code = val[1];
      this.parmValue.addr_code.area_code = val[2];
      this.ruleForm.linker_addr = val;
    },
    // 收发货详细地址
    linkerDetail(val) {
      this.parmValue.wsm_addr = val;
    },
    // 仓库所在公司
    getValue(val) {
      this.parmValue.supplierNo = val;
    },
    // 仓库名
    getValue1(val) {
      this.parmValue.name = val;
    },
    // 负责人
    getValue2(val) {
      console.log(val);
      this.stockDutyer = val;
    },
    closeModel() {
      console.log("closeModel!!");
    },
    async initForm() {
      this.loading = true;
      // await this.getClist();
      // await this.getRole();
      this.ruleForm = {
        stockName: "my-Stock", //仓库名称
        stockDutyer: "", //仓库负责人
        linker: "", //收发货联系人

        linker_mobile: "", //收发货人联系电话
        linker_addr: "", //收发货地址
        selectStock_go_options: [],
        stockDutyer_options: [],
      };
      console.log(this.addId);
      if (this.addId === "add") {
        console.log("新建仓库节点");
        console.log(this.ruleForm);
        this.rulesThis = this.rules;
        await this.resetForm();
      } else if (this.addId === "detail") {
        console.log("detail");
        this.rulesThis = {};
        await this.resetForm(this.sitem);
        // await this.initData()
      } else {
        console.log("当前是编辑按钮");
        this.rulesThis = this.rules;
      }
      this.loading = false;
    },

    async getClist() {
      this.organizeList = [];
      const res = await asyncRequest.getClist({});
      if (res && res.code === 0 && res.data) {
        this.organizeList = res.data;
        this.recursion(this.organizeList);
      }
    },
    recursion(list) {
      list.map((v) => {
        if (v && Array.isArray(v.child)) {
          v.value = v.id + "";
          v.label = v.name;
          if (v.child.length === 0) {
            delete v["child"];
          } else {
            this.recursion(v.child);
          }
        }
        return v;
      });
    },
    async getRole() {
      const model = {
        status: "", // 状态
        level: "", // 姓名
        role_name: "",
      };
      const res = await asyncRequest.getRole(model);
      if (res && res.code === 0 && res.data) {
        this.roleList = res.data;
        this.roleList.map((v1) => {
          v1.id += "";
          v1.status += "";
          return v1;
        });
      }
    },

    async resetForm(sitem) {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.ruleForm = {
            dutyer_mobile: "18818818818",
            stockDetail: "顺义区宏远888",
            selectStock_go: "", //出库仓库
            selectStock_go_options: [], //出库仓库列表
            stockName: "my-STock", //仓库名称
            linker: "张三",
            linker_mobile: "13223289230",
            linker_detail: "朝阳区太阳城666",
            stockDutyer: "", //仓库负责人
            stockDutyer_options: [], //仓库负责人列表
          };
          if (this.id === "add" || this.isDetail) {
            this.rules.username[0].required = false;
          }
        }
      });
    },
    async submitForm(formName) {
      let paraValue = {
        name: this.ruleForm.stockName,
        supplierNo: this.ruleForm.storeToCompany,
        wsmtype: "1", //仓库类型
        addr: this.ruleForm.stockDetail, //仓库地址
        contactor: this.stockDutyer, //仓库联系人职位
        mobile: this.ruleForm.dutyer_mobile, //仓库联系人
        position: "采购",
        // wsm_type:"",后台暂时不用
        wsm_name: this.ruleForm.linker,
        wsm_mobile: this.ruleForm.linker_mobile,
        addr_code: {
          // provice_code: this.ruleForm.linker_addr[0],
          // city_code: this.ruleForm.linker_addr[1],
          // area_code: this.ruleForm.linker_addr[2],
        },
        wsm_addr: this.ruleForm.linker_detail,
        addrs_code: {
          // provice_code: this.ruleForm.stockToArea[0],
          // city_code: this.ruleForm.stockToArea[1],
          // area_code: this.ruleForm.stockToArea[2],
        },
      };
      console.log(paraValue);
      console.log(this.ruleForm);
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log("submit!");
          this.getList(paraValue);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 表单提交
    async getList(paraValue) {
      const res = await asyncRequest.add(paraValue);
      if (res && res.code === 0 && res.data) {
        console.log(res.data);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
      }
      this.loading = false;
    },
    async getDutyer() {
      this.loading = true;
      const obj = {
        name: "",
        page: 1,
        size: 15,
        status: "",
        username: "",
      };
      const res = await asyncRequest.getlist(obj);
      if (res && res.code === 0 && res.data) {
        const { list } = res.data;
        this.ruleForm.stockDutyer_options = list;
        console.log(this.ruleForm.stockDutyer_options);
        // console.log(res.data.list);
        // res.data.list.forEach((element) => {
        //   // let dutyer = {
        //   //   label: element.nickname,
        //   //   value: element.depart[0] ? element.depart[0].name : "",
        //   // };
        //   // console.log(this.ruleForm.stockDutyer_options);
        //   this.ruleForm.stockDutyer_options.push(element);
        // });
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
    async getCompany() {
      this.loading = true;
      const obj = {
        page: 1,
        size: 15,
      };
      const res = await asyncRequest.getCompany(obj);
      if (res && res.code === 0 && res.data) {
        console.log(res.data.list);
        res.data.list.forEach((element) => {
          let company = {
            label: element.name,
            value: element.code,
          };
          // console.log(this.ruleForm.selectStock_go_options);
          this.ruleForm.selectStock_go_options.push(company);
          // this.ruleForm.stockDutyer_options.push(dutyer);
        });
        // console.log(this.ruleForm.selectStock_go_options);
        // 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.getDutyer();
      this.loading = false;
    },
    // 新建仓库
    async addStock() {
      this.loading = true;
      console.log(this.parmValue);
      const res = await asyncRequest.addStock(this.parmValue);
      if (res && res.code === 0 && res.data) {
        console.log(res.data.list);
        res.data.list.forEach((element) => {
          // console.log(element.nickname);
          let company = {
            label: element.name,
            value: element.code,
          };
          this.ruleForm.selectStock_go_options.push(company);
          // this.ruleForm.stockDutyer_options.push(dutyer);
        });
        console.log(this.ruleForm.selectStock_go_options);
        // 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 getStocDetail() {
      this.loading = true;
      // console.log(this.parmValue);
      const res = await asyncRequest.detail(5);
      if (res && res.code === 0 && res.data) {
        console.log(res.data.list);
        res.data.list.forEach((element) => {
          // console.log(element.nickname);
          let company = {
            label: element.name,
            value: element.code,
          };
          this.ruleForm.selectStock_go_options.push(company);
          // this.ruleForm.stockDutyer_options.push(dutyer);
        });
        console.log(this.ruleForm.selectStock_go_options);
        // 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;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>