renli-pc/src/pages/storeManage/baseStaff/components/editothers.vue

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title + '批量确认'"
    :visible.sync="dialogFormVisible"
    width="70vw"
    v-dialogDrag
    :before-close="handleClose"
  >
    <el-form
      ref="from"
      :model="from"
      label-position="right"
      label-width="100px"
    >
      <el-form-item>
        <div
          v-for="(item, index) in from.rows"
          :key="index"
          style="width: 48%;border: 1px solid #DCDFE6;border-radius: 20px;margin-left: 2%;padding: 10px;"
        >
          <el-form-item :prop="'rows.' + index + '.staffName'" label="员工姓名">
            <el-input v-model="item.staffName" disabled />
          </el-form-item>

          <el-form-item :prop="'rows.' + index + '.staffNum'" label="员工编号">
            <el-input v-model="item.staffNum" disabled />
          </el-form-item>

          <el-form-item :prop="'rows.' + index + '.brandNumber'" label="水牌号">
            <el-input v-model="item.brandNumber" clearable />
          </el-form-item>

          <texts v-show="item.tag == 1" />
        </div>
      </el-form-item>
      <el-form-item>
        <div
          style="width:100%;display:flex ;justify-content: center;align-items:center;"
        >
          <el-button
            type="primary"
            @click="inspect()"
            style="margin-right: 60px;"
            >检测</el-button
          >
          <el-button @click="confirm">确定</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { checkHumam, editStateStoreConversions } from "@/api/storeManage.js";
import { re } from "semver";
import texts from "./text";
export default {
  components: { texts },
  data() {
    return {
      dialogFormVisible: false, //弹窗开关
      title: "", //弹窗标题
      from: {}, //主对象
      sessionStorageData: JSON.parse(
        sessionStorage.getItem("sessionStorageData")
      ) //门店参数合集
    };
  },
  methods: {
    //关闭弹窗前的回调方法
    handleClose() {
      this.form = {};
      this.dialogFormVisible = false;
      // this.$refs.form.clearValidate();
    },
    //组件传值
    show(row) {
      this.from = { ...row };
      console.log(
        "🚀 ~ file: editothers.vue ~ line 64 ~ show ~ this.from",
        this.from.rows
      );
      this.dialogFormVisible = true;
    },
    //检查方法
    inspect() {
      console.log(
        "🚀 ~ file: editothers.vue ~ line 87 ~ this.form.rows.forEach ~ this.form.rows",
        this.from.rows
      );
      let arrayNum = [];
      this.from.rows.forEach(item => {
        let arr = {};
        arr.id = item.id;
        arr.brandNumber = item.brandNumber;
        arrayNum.push(arr);
      });
      checkHumam(arrayNum).then(res => {
        this.from.rows = res.rows;
        this.$alert(res.message, "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "success",
          center: true,
          callback: action => {}
        });
      });
    },
    //确定返回方法
    confirm() {
      let arrayNum = [];
      this.from.rows.forEach(item => {
        let arr = {};
        arr.id = item.id;
        arr.brandNumber = item.brandNumber;
        arrayNum.push(arr);
      });
      editStateStoreConversions(arrayNum).then(res => {
        if (res.code == "000000") {
          this.$message.success({
            message: res.message
          });
          this.$emit("editData");
          this.dialogFormVisible = false;
        } else {
          this.from.rows = res.rows;
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "success",
            center: true,
            callback: action => {}
          });
        }
      });
    }
  }
};
</script>

<style>
.el-form-item__content {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: 0px !important;
}
</style>