devicesmgt/sgzb-ui/src/views/repairTest/repair/dialogTwoForm.vue

<template>
  <el-dialog v-dialogDrag v-loading.fullscreen.lock="fullscreenLoading" :before-close="cancel" :title="dialogTitle"
    :visible.sync="dialogShowFlag" append-to-body width="600px">
    <div class="form_box_one">
      <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" class="demo-dynamic" label-width="100px">
        <div v-for="(domain, index) in dynamicValidateForm.premiumList" :key="domain.key" class="bor_box">
          <p class="form_box_title">编码管理设备</p>
          <div class="form_box_line"></div>
          <div class="form_box_item">
            <!-- :rules="{
                required: true,
                message: '保费不能为空',
                trigger: 'blur',
              }"
              label="选择配件：" -->
            <el-form-item :prop="'premiumList.' + index + '.partName'" label="配件名称：">
              <el-input v-model="domain.partName" placeholder="请输入" size="small" maxlength="50"
                style="width: 350px"></el-input>
            </el-form-item>
            <el-form-item :prop="'premiumList.' + index + '.partType'" label="是否收费：" required
              :rules="{ required: true, message: '请选择是否收费', trigger: 'blur', }">
              <el-radio-group style="width: 350px" v-model="domain.partType">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="index == 0" :prop="'premiumList.' + index + '.supplierId'" label="选择厂家：" :rules="{
              message: '请选择厂家',
              required: true,
              trigger: 'blur',
            }">
              <el-select v-model="domain.supplierId" placeholder="请选择" size="small" filterable style="width: 350px">
                <el-option v-for="dict in supplierSelectList" :key="dict.supplierId" :label="dict.supplier"
                  :value="dict.supplierId" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item
              :prop="'premiumList.' + index + '.partPrice'"
              label="配件单价(元)："
              label-width="120px"
              :rules="{
                required: false,
                validator: meneyIntegerValidator,
                trigger: 'blur',
              }"
            > -->
            <el-form-item :prop="'premiumList.' + index + '.partPrice'" label="配件单价(元)：" label-width="120px">
              <el-input v-model="domain.partPrice" placeholder="请输入" size="small" maxlength="10"
                style="width: 330px"></el-input>
            </el-form-item>
            <el-form-item :prop="'premiumList.' + index + '.partNum'" label="配件数量：" :rules="{
              required: false,
              validator: numberIntegerValidator,
              trigger: 'blur',
            }">
              <el-input v-model="domain.partNum" placeholder="请输入" size="small" maxlength="10"
                style="width: 350px"></el-input>
            </el-form-item>
            <el-form-item :prop="'premiumList.' + index + '.repairContent'" label="维修内容：">
              <el-input v-model="domain.repairContent" maxlength="100" placeholder="请输入" show-word-limit size="small"
                style="width: 350px" type="textarea"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="rowObj.code !== null && rowObj.code !== ''">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </div>
    <div class="form_box_two">
      <el-form ref="dynamicValidateFormTwo" :model="dynamicValidateFormTwo" class="demo-dynamic" label-width="100px">
        <div v-for="(domain, index) in dynamicValidateFormTwo.premiumListTwo" :key="domain.key" class="bor_box">
          <p class="form_box_title">数量管理设备</p>
          <div class="form_box_line"></div>
          <div class="form_box_item">
            <!-- :rules="{
                required: true,
                message: '保费不能为空',
                trigger: 'blur',
              }"
              label="选择配件：" -->
            <el-form-item :prop="'premiumListTwo.' + index + '.repairNum'" label="维修数量：" :rules="{
              required: true,
              validator: numberIntegerValidator,
              trigger: 'blur',
            }">
              <el-input v-model="domain.repairNum" placeholder="请输入" size="small" maxlength="10"
                style="width: 350px"></el-input>
            </el-form-item>
            <el-form-item label="配件名称：">
              <el-input v-model="domain.partName" placeholder="请输入" size="small" maxlength="50"
                style="width: 350px"></el-input>
            </el-form-item>
            <el-form-item label="是否收费：" required :rules="{ required: true, message: '请选择是否收费', trigger: 'blur', }">
              <el-radio-group style="width: 350px" v-model="domain.partType">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="index == 0" :prop="'premiumListTwo.' + index + '.supplierId'" label="选择厂家：" :rules="{
              message: '请选择厂家',
              required: true,
              trigger: 'blur',
            }">
              <el-select v-model="domain.supplierId" placeholder="请选择" size="small" filterable style="width: 350px">
                <el-option v-for="dict in supplierSelectList" :key="dict.supplierId" :label="dict.supplier"
                  :value="dict.supplierId" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item
              :prop="'premiumListTwo.' + index + '.partPrice'"
              label="配件单价(元)："
              label-width="120px"
              :rules="{
                required: false,
                validator: meneyIntegerValidator,
                trigger: 'blur',
              }"
            > -->
            <el-form-item label="配件单价(元)：" label-width="120px">
              <el-input v-model="domain.partPrice" placeholder="请输入" size="small" maxlength="10"
                style="width: 330px"></el-input>
            </el-form-item>
            <el-form-item label="配件数量：" :rules="{
              required: false,
              validator: numberIntegerValidator,
              trigger: 'blur',
            }">
              <el-input v-model="domain.partNum" placeholder="请输入" size="small" maxlength="10"
                style="width: 350px"></el-input>
            </el-form-item>

            <el-form-item label="维修内容：">
              <el-input v-model="domain.repairContent" maxlength="100" placeholder="请输入" show-word-limit size="small"
                style="width: 350px" type="textarea"></el-input>
            </el-form-item>
          </div>

          <!--          <el-button @click.prevent="removeDomain(domain, index)"-->
          <!--            >删除-->
          <!--          </el-button>-->
          <!-- <div class="add_box">
            <el-button
              icon="el-icon-plus"
              size="mini"
              type="success"
              @click="addDomainTwo"
              >添加配件
            </el-button>
          </div> -->
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="rowObj.code == null || rowObj.code == ''">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitTwo">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {
  submitRepairApplyApi, getUserSelectApi,
  getRepairMaTypeListApi, listPartType, getSupplierSelectApi
} from "@/api/repairTest/repair";
// import { listPartType, } from "@/api/store/tools";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  getInfo,
} from "@/api/login";;
export default {
  components: { Treeselect },
  props: {
    // 弹窗是否显示
    isShowFlag: {
      type: Boolean,
      default: false
    },
    // 对应操作数据键值
    priKey: {
      type: [String, Number],
      default: ""
    },
    //弹窗标题
    dialogTitle: {
      type: String,
      default: ""
    },
    //弹窗标题
    rowObj: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isShowFlag(val) {
      if (val) {
        this.init();
      }
    }
  },
  computed: {
    dialogShowFlag: {
      get() {
        return this.isShowFlag;
      },
      set(v) {
        this.$emit("update:isShowFlag", v);
      }
    }
  },
  data() {
    return {
      supplierSelectList: [],
      fullscreenLoading: false,
      dynamicValidateForm: {
        premiumList: [
          {
            selected: "Y",
            premium: undefined,
            rate: undefined,
            feeRate: undefined,
            fee: undefined,
            baofei1_unit: "",
            shangyoufeiyonge_unit: "",
            downRate: undefined,
            downFee: undefined,
            xiayoufeiyonge_unit: ""
          }
        ],
      },
      dynamicValidateFormTwo: {
        premiumListTwo: [
          {
            selected: "Y",
            premium: undefined,
            rate: undefined,
            feeRate: undefined,
            fee: undefined,
            baofei1_unit: "",
            shangyoufeiyonge_unit: "",
            downRate: undefined,
            downFee: undefined,
            xiayoufeiyonge_unit: ""
          }
        ],
      },

      userSelectList: [],
      companyId: '',
      taskId: ""
    };
  },
  mounted() {
    this.$eventBus.$on('taskId', (taskId) => {
      this.taskId = taskId
    })
    this.getTree()
  },
  methods: {
    //正则校验配件费用
    meneyIntegerValidator(rule, value, callback) {
      const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
      if (value === '' || reg.test(value)) {
        callback();
      } else {
        callback(new Error('请输入大于0的数'));
      }
    },
    //正则校验配件数量--维修数量
    numberIntegerValidator(rule, value, callback) {
      const reg = /^\+?[1-9][0-9]*$/;
      if (reg.test(value) && value <= this.rowObj.repairNum) {
        callback();
      } else {
        callback(new Error('请输入大于0的并且小于维修总量的正整数'));
      }
    },
    getTree() {
      listPartType().then(response => {
        this.deptList = this.handleTree(response.data, "paId");
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.paId,
        label: node.paName,
        children: node.children
      };
    },
    getList() {
      let params = {
        taskId: this.taskId
      }
      this.loading = true;
      getRepairMaTypeListApi(params).then(res => {
        if (res.code == 200) {
          this.repairList = res.rows;
          this.total = res.total;
          this.loading = false;
        }
      })
    },
    init() {
      if (this.rowObj.code !== null && this.rowObj.code !== '') {
        this.dynamicValidateForm.premiumList = [];
        this.dynamicValidateFormTwo.premiumListTwo = [];
        this.addDomainOne();
      } else {
        this.dynamicValidateForm.premiumList = [];
        this.dynamicValidateFormTwo.premiumListTwo = [];
        this.addDomainTwo();
      }
      getSupplierSelectApi().then(res => {
        this.supplierSelectList = res.data
      })
    },

    // 取消按钮
    cancel() {
      this.dialogShowFlag = false;
      // this.$refs["form"].resetFields();
      // this.dynamicValidateForm.premiumList = [];
    },
    addDomainOne() {
      // 选择配件 partId
      // 是否收费 partType
      // 配件数量 partNum
      // 配件费用 partCost
      // 维修内容 repairContent
      // 维修数量 repairNum
      this.dynamicValidateForm.premiumList.push({
        selected: "N",
        partName: '',
        repairer: '',
        partType: '',
        partNum: '',
        partCost: '',
        repairContent: '',
        supplierId: '',
        partPrice: '',
        repairNum: 1,
        key: Date.now()
      });
    },
    addDomainTwo() {
      this.dynamicValidateFormTwo.premiumListTwo.push({
        selected: "N",
        partName: '',
        repairer: '',
        partType: '',
        partNum: '',
        partCost: '',
        repairContent: '',
        repairNum: '',
        key: Date.now()
      });
    },
    submit() {
      this.$refs["dynamicValidateForm"].validate(valid => {
        if (valid) {
          this.dynamicValidateForm.premiumList.forEach(item => {
            item.partCost = item.partPrice;
          })
          // this.dynamicValidateForm.premiumList[0].partCost = this.dynamicValidateForm.premiumList[0].partPrice;
          // 编码管理传递参数
          console.log('this.dynamicValidateForm.premiumList1111)', this.dynamicValidateForm.premiumList);

          let params = {
            taskId: this.rowObj.taskId,
            maId: this.rowObj.maId,
            typeId: this.rowObj.typeId,
            id: this.rowObj.id,
            repairType: 2,
            companyId: this.companyId,
            repairNum: 1,
            partStrList: JSON.stringify(this.dynamicValidateForm.premiumList)
          }
          this.fullscreenLoading = true
          submitRepairApplyApi(params).then(res => {
            if (res.code == 200) {
              this.getList()
              this.fullscreenLoading = false
              this.dialogShowFlag = false
              this.$message.success('操作成功!')
              this.$emit('domainChange', res.code)
            }
          }).catch(() => {
            this.fullscreenLoading = false
          })
        } else {
          return false;
        }
      });
    },
    submitTwo() {
      this.$refs["dynamicValidateFormTwo"].validate(valid => {
        if (valid) {
          // this.dynamicValidateFormTwo.premiumListTwo[0].partCost = this.dynamicValidateFormTwo.premiumListTwo[0].partPrice;
          this.dynamicValidateFormTwo.premiumListTwo.forEach(item => {
            item.partCost = item.partPrice;
          })

          console.log('this.dynamicValidateFormTwo.premiumListTwo2222', this.dynamicValidateFormTwo.premiumListTwo);
          // 数量管理传递参数
          let params = {
            taskId: this.rowObj.taskId,
            maId: this.rowObj.maId,
            typeId: this.rowObj.typeId,
            id: this.rowObj.id,
            repairType: 2,
            companyId: this.companyId,
            repairNum: 1,
            partStrList: JSON.stringify(this.dynamicValidateFormTwo.premiumListTwo)
          }
          this.fullscreenLoading = true
          submitRepairApplyApi(params).then(res => {
            if (res.code == 200) {
              this.getList()
              this.fullscreenLoading = false
              this.dialogShowFlag = false
              this.$message.success('操作成功!')
              this.$emit('domainChange', res.code)
            }
          }).catch(() => {
            this.fullscreenLoading = false
          })
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.form_box_one {
  width: 100%;
  display: flex;
  flex-direction: column;

  .form_box_title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 12px;
  }

  .form_box_line {
    margin: 8px 0;
    width: 100%;
    border-bottom: 2px solid #1a1c22;
  }

  .form_box_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .add_box {
    display: flex;
    justify-content: flex-end;
    margin-right: 3%;
  }
}

.form_box_two {
  display: flex;
  flex-direction: column;

  .form_box_title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 12px;
  }

  .form_box_line {
    margin: 8px 0;
    width: 100%;
    border-bottom: 2px solid #1a1c22;
  }

  .form_box_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .add_box {
    display: flex;
    justify-content: flex-end;
    margin-right: 3%;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 3%;
  margin-top: 10px;
}
</style>