order-ui-pc/src/views/sellOut/salesOrder/addEdit copy.vue

<template>
  <el-dialog
    :title="title"
    :center="true"
    align="left"
    top="5vh"
    width="1040px"
    @close="closeModel"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    id：{{ id }} isDetail：{{ isDetail }},
    <!-- sitem:{{ sitem }}， -->
    入参：{{ ruleForm }}
    <el-card>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rulesThis"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="退货原因"
              prop="returnReason"
              v-if="id === 'add' || isDetail"
            >
              <el-select
                style="width: 100%"
                v-model="ruleForm.returnReason"
                placeholder="退换货原因"
              >
                <el-option
                  v-for="item in reason_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="退货备注" prop="return_remark">
              <!-- <el-input v-model="ruleForm.tel" :disabled="isDetail"></el-input> -->
              <el-input
                type="textarea"
                maxlength="250"
                show-word-limit
                placeholder="请填写备注"
                v-model="ruleForm.return_remark"
              />
            </el-form-item>
            <el-form-item label="仓库信息">
              <el-table
                :data="tableForm.product_go"
                border
                :size="'mini'"
                row-key="key"
              >
                <el-table-column label="商品总数量" width="100">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.num }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="已发货数量" width="100">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.send_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>
                        {{ scope.row.send_num }}
                      </p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="未发货数量" width="100">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsend_num }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="退货数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.return_num'" -->
                    <el-form-item
                      :style="!scope.row.edit ? 'margin:0' : ''"
                      :rules="{
                        required: true,
                        message: '退货数量不能为空',
                        trigger: 'blur',
                      }"
                    >
                      <el-input
                        :disabled="!scope.row.edit"
                        v-model="ruleForm.return_num"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="采购编码" width="180">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.orderCode }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="仓库名称" width="150">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsm_name'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_name }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="仓库供应商" width="220">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_supplier }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="仓库编码" width="200">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_code }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>

                <!-- <el-table-column label="仓库供应商">
                  <template slot-scope="scope">
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_supplierNo }}</p>
                    </el-form-item>
                  </template>
                </el-table-column> -->

                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      content="编辑"
                      v-if="!scope.row.edit"
                      placement="top"
                    >
                      <i
                        class="el-icon-edit tb-icon"
                        @click="editRow(scope.$index, 'return')"
                      ></i>
                    </el-tooltip>

                    <el-tooltip
                      effect="dark"
                      content="保存"
                      v-if="scope.row.edit"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-check tb-icon"
                        @click="checkRow(scope.$index, 'return')"
                      ></i>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="重置" placement="top">
                      <i
                        v-if="scope.row.edit"
                        class="el-icon-refresh-left tb-icon"
                        @click="resetRow(scope.$index)"
                      ></i>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-col
                :span="24"
                style="text-align: right; padding: 30px 0 10px 0"
              >
                <el-button type="primary" :size="'mini'" @click="submitForm"
                  >保 存
                </el-button>
              </el-col> -->
            </el-form-item>
            <el-form-item label="收货信息">
              <el-table
                :data="tableForm.get_product_go"
                border
                :size="'mini'"
                row-key="key"
              >
                <el-table-column label="收货总数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.send_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>
                        {{ scope.row.receipt_quantity }}
                      </p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="已发货数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.send_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>
                        {{ scope.row.send_num }}
                      </p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="未发货数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsend_num }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="退货数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.return_num'" -->
                    <el-form-item
                      :style="!scope.row.edit ? 'margin:0' : ''"
                      :rules="{
                        required: true,
                        message: '退货数量不能为空',
                        trigger: 'blur',
                      }"
                    >
                      <el-input
                        :disabled="!scope.row.edit"
                        v-model="ruleForm.get_return_num"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="采购编码" width="200">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.send_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>
                        {{ scope.row.orderCode }}
                      </p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="仓库供应商">
                  <template slot-scope="scope">
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_supplierNo }}</p>
                    </el-form-item>
                  </template>
                </el-table-column> -->
                <el-table-column label="收货联系人 ">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsm_name'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.contactor }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="联系方式" width="120">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsm_name'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.mobile }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      content="编辑"
                      v-if="!scope.row.edit"
                      placement="top"
                    >
                      <i
                        class="el-icon-edit tb-icon"
                        @click="editRow(scope.$index, 'get')"
                      ></i>
                    </el-tooltip>

                    <el-tooltip
                      effect="dark"
                      content="保存"
                      v-if="scope.row.edit"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-check tb-icon"
                        @click="checkRow(scope.$index, 'get')"
                      ></i>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="重置" placement="top">
                      <i
                        v-if="scope.row.edit"
                        class="el-icon-refresh-left tb-icon"
                        @click="resetRow(scope.$index)"
                      ></i>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-col
                :span="24"
                style="text-align: right; padding: 30px 0 10px 0"
              >
                <el-button type="primary" :size="'mini'" @click="submitForm"
                  >保 存
                </el-button>
              </el-col> -->
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24" style="text-align: right">
          <el-button type="primary" @click="submitForm" v-if="!isDetail"
            >保 存
          </el-button>
          <el-button @click="showModelThis = false">{{
            isDetail ? "关 闭" : "取 消"
          }}</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
   <script>
import asyncRequest from "@/apis/service/sellOut/sellReturnList";
import resToken from "@/mixins/resToken";
import {
  isnumber,
  isMobile,
  validEmail,
  isAlphanumeric,
  isChinese,
  isEmoticon,
  validAlphabets,
} from "@/utils/validate";
export default {
  name: "sellReturnList",
  props: ["showModel", "id", "isDetail", "sitem"],
  mixins: [resToken],
  data() {
    const validateusername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("账号不能为空！"));
      } else {
        if (value.length < 6 || value.length > 18) {
          callback(new Error("账号规则为6~18位数字与字母组合！"));
        } else {
          if (isnumber(value)) {
            callback(new Error("账号规则为6~18位数字与字母组合！"));
          } else if (validAlphabets(value)) {
            callback(new Error("账号规则为6~18位数字与字母组合！"));
          } else if (!isAlphanumeric(value)) {
            callback(new Error("账号规则为6~18位数字与字母组合！"));
          } else {
            callback();
          }
        }
      }
    };
    const validatename = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("真实姓名不能为空！"));
      } else {
        if (value.length < 2 || value.length > 12) {
          callback(new Error("真实姓名规则为2~12位汉字！"));
        } else {
          if (!isChinese(value)) {
            callback(new Error("真实姓名规则为2~12位汉字！"));
          } else if (isEmoticon(value)) {
            callback(new Error("真实姓名规则为2~12位汉字！"));
          } else {
            callback();
          }
        }
      }
    };
    const validatemobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空！"));
      } else {
        if (!isMobile(value)) {
          callback(new Error("手机号格式不正确！"));
        } else {
          callback();
        }
      }
    };

    const validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (!validEmail(value)) {
          callback(new Error("邮箱格式不正确！"));
        } else {
          callback();
        }
      }
    };
    return {
      noSendNumbers: "", //收货-未发货数量
      noSendNum: "", //销售-未发货数量
      reason_options: [], //退换货原因备选项
      loading: false,
      title: "添加销售退货单",
      showModelThis: this.showModel,
      ruleForm: {
        get_return_num: "",
        outCode: "", //出库单编号
        return_remark: "", //退货备注
        return_num: "", //退货数量
        returnReason: [], //退货原因
        // email: "",
        // role_id: "",
        // status: "1",
        // item: [],
      },
      rulesThis: this.rules,
      rules: {
        returnReason: [
          {
            required: true,
            message: "请选择退货原因",
            // type: "array",
            trigger: "change",
          },
        ],
        return_num: [
          {
            required: true,
            validator: validatemobile,
            trigger: "blur",
          },
        ],
        return_remark: [
          {
            required: true,
            message: "请输入退货备注",
            trigger: "blur",
          },
        ],
      },
      tableForm: {
        product_go: [],
        get_product_go: [],
      },
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },

  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    // 获取退换货原因
    async getReason() {
      this.loading = true;
      let model = {
        page: 1,
        size: 100,
        type: "5",
      };
      const res = await asyncRequest.getReason(model);
      if (res && res.code === 0 && res.data) {
       const {list}=res.data
        list.forEach((element) => {
          let obj = {
            value: element.result_code,
            label: element.result,
            id: element.id,
          };
          this.reason_options.push(obj);
        });
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
    async initForm() {
      this.loading = true;
      // await this.getRole();
      if (this.id === "add") {
        this.title = "添加销售退货单";
        this.rulesThis = this.rules;
        await this.resetForm();
      } else {
        if (this.isDetail) {
          this.title = "添加销售退货单详情";
          this.rulesThis = {};
        } else {
          this.title = "修改添加销售退货单";
          this.rulesThis = this.rules;
        }
        await this.resetForm(this.sitem);
        // await this.initData()
      }
      this.getReason(); //获取退还货原因

      this.loading = false;
    },
    async initData() {
      // const res = await asyncRequest.detail({ id: this.id });
      // if (res && res.code === 0 && res.data) {
      //   this.ruleForm = res.data;
      //   this.ruleForm.role_id = this.ruleForm.role;
      // } else if (res && res.code >= 100 && res.code <= 104) {
      //   await this.logout();
      // } else {
      //   this.$message.warning(res.message);
      // }
    },
    async resetForm(sitem) {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
        
          this.ruleForm = {
            return_remark: "", //退货备注
            return_num: "", //退货数量
            returnReason: [], //退货原因
          };
        }
      });
    },

    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const model = JSON.parse(JSON.stringify(this.ruleForm));
          model.errorCode = model.returnReason.toString();
          model.num = model.return_num;
          model.remark = model.return_remark;
          model.outCode = this.outCode;
          if (model.return_num > this.noSendNum) {
            this.$message.warning("退货数量不能大于未发货数量");
            return;
          }
          let res = {};
          if (this.id === "add") {
            delete model["id"];
            res = await asyncRequest.add(model);
          } else {
            res = await asyncRequest.update(model);
          }
          this.loading = false;
          if (res && res.code === 0) {
            const title = this.id === "add" ? "添加成功" : "修改成功";
            this.$notify.success({
              title,
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.$emit("refresh");
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //异常原因筛选
    //保存某一行
    checkRow(rowIndex, name) {
      if (name == "return") {
        const model = JSON.parse(JSON.stringify(this.ruleForm));
        if (Number(model.return_num) > Number(this.noSendNum)) {
          this.$message.warning("退货数量不能大于未发货数量");
          return;
        }
        const { check_value, check_remark } =
          this.tableForm.product_go[rowIndex];
        if (check_value != "" && check_remark != "") {
          this.tableForm.product_go[rowIndex].edit = false;
        } else {
          this.$message.warning("审核情况或审核备注不能为空");
        }
      } else if (name == "get") {
        const model = JSON.parse(JSON.stringify(this.ruleForm));
        if (Number(model.get_return_num) > Number(this.noSendNum)) {
          this.$message.warning("退货数量不能大于未发货数量");
          return;
        }
        const { check_value, check_remark } =
          this.tableForm.get_product_go[rowIndex];
        if (check_value != "" && check_remark != "") {
          this.tableForm.get_product_go[rowIndex].edit = false;
        } else {
          this.$message.warning("审核情况或审核备注不能为空");
        }
      }
    },
    //编辑某一行
    editRow(rowIndex, name) {
      if (name == "return") {
        let index = this.tableForm.product_go.findIndex((v) => {
          v.edit;
        });
        if (index !== -1) {
          this.$message.warning("请完成其他行的编辑！");
          return;
        } else {
          this.tableForm.product_go[rowIndex].edit = true;
        }
      } else if (name == "get") {
        let index = this.tableForm.product_go.findIndex((v) => {
          v.edit;
        });
        if (index !== -1) {
          this.$message.warning("请完成其他行的编辑！");
          return;
        } else {
          this.tableForm.get_product_go[rowIndex].edit = true;
        }
      }
    },
    resetRow(rowIndex) {
      this.tableForm.product_go[rowIndex].check_remark = "";
      this.tableForm.product_go[rowIndex].check_value = "agree";
    },
  },
};
</script>

   <style lang="scss" scoped>
.sellReturnList {
}
</style>