addProject.vue 6.72 KB
<template>
  <div>
    <el-dialog :title="isEdit=='add'?$t('button.groupAdd'):$t('button.groupEdit')" :visible.sync="isShow" v-if="isShow" :close-on-click-modal='false' class="manage-dialog dialog_lj" :before-close="closeDialog">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item :label="$t('VideoShopTour.checkItems')" prop="name">
          <el-input v-model.trim="addForm.name" maxlength="20"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.industry')" prop="industryId">
          <el-select v-model="addForm.industryId" filterable :placeholder="$t('pholder.select')" @change="handleIndustryChange" clearable>
            <el-option v-for="item in industryList" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('table.type')" prop="sopTypeId">
          <el-select v-model="addForm.sopTypeId" filterable :placeholder="$t('pholder.select')" @change="handleChange" clearable>
            <el-option v-for="item in sopTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item :label="$t('VideoShopTour.scoreNum')" prop="score">
          <el-input-number  v-model="addForm.score" :precision='0' :controls='false' :max="100" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('VideoShopTour.introduction')" prop="intro">
          <el-input  type="textarea" maxlength="100" :autosize="{ minRows: 2, maxRows: 4}" v-model.trim="addForm.intro"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button type="primary" @click="addSubmit('addForm')" class="dialog-btn dialog-confirm-btn">
          {{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isEdit:'add',
        isShow: false,
       sopTypeList:[],
       industryList:[],
        addForm: {
          system:'1',
          name: '',
          intro: '',
          sopTypeId: '',
          score:'',
          industryId:''
        },
        rules: {
          name: [{
            required: true,
            message: this.$t('pholder.input'),
            trigger: 'blur'
          }],
          sopTypeId: [{
            required: true,
            message: this.$t('pholder.select'),
            trigger: 'blur'
          }],
          score: [{
            required: true,
            message: this.$t('pholder.input'),
            trigger: 'blur'
          }],
          industryId: [{
            required: true,
            message: this.$t('pholder.select'),
            trigger: 'blur'
          }],
        },
      }
    },
    methods: {
      dialogInit(type,row) {
        this.isEdit = type;
        this.isShow = true;
        this.addForm = {
          system:'1',
          name: '',
          intro: '',
          sopTypeId: '',
          score:'',
          industryId:''
        };
        this.getIndustryList()
        if(row){
          let currObj = Object.assign({},row)
          this.addForm.name = currObj.name;
          this.addForm.id = currObj.id;
          this.addForm.sopTypeId = currObj.sopTypeId;
          this.addForm.intro = currObj.intro;
          this.addForm.score = currObj.score;
          this.addForm.industryId = currObj.industryId;
          this.getSopTypeList()
        }
      },
      getIndustryList(){
        this.industryList = [];
        this.$api.videoShopTourReport.getIndustryList({ pageNum:1,pageSize:9999999}).then(data => {
          let result = data.data;
          if(result.code == '200'){
            if (result.data.list.length) {
              this.industryList = result.data.list;
            }
          }
        })
      },
      handleIndustryChange(){
        this.$forceUpdate()
        this.addForm.sopTypeId = ''
        this.getSopTypeList()
      },
      getSopTypeList() {
        this.sopTypeList = [];
        this.$api.videoShopTourReport.getPatrolSopType(
            {
              system: 1,
              pageNum:1,
              pageSize:9999999,
              industryId:this.addForm.industryId
            },
            null,
            true
          )
          .then(data => {
            let result = data.data;
            if(result.code == '200'){
              if (result.data.list.length) {
                this.sopTypeList = result.data.list;
              }
            }
          })
      },
      handleChange(val){
        this.$forceUpdate()
      },
      addSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.isEdit=='add'){
              this.$api.videoShopTourReport.addPatrolSopProject(this.addForm)
                .then((res) => {
                  let result = res.data;
                  if(result.code==200){
                    this.$message({
                      message: result.msg,
                      type: 'success'
                    });
                    this.$parent.getTableData();
                    this.$refs.addForm.resetFields();
                    this.isShow = false
                  }else{
                    this.$message({
                      message: result.msg,
                      type: 'error'
                    });
                  }
                })
            }else{
              this.$api.videoShopTourReport.editPatrolSopProject(this.addForm)
                .then((res) => {
                  let result = res.data;
                  if(result.code==200){
                    this.$message({
                      message: result.msg,
                      type: 'success'
                    });
                    this.$parent.getTableData();
                    this.$refs.addForm.resetFields();
                    this.isShow = false
                  }else{
                    this.$message({
                      message: result.msg,
                      type: 'error'
                    });
                  }
                })
            }
          } else {
            return false;
          }
        });
      },
      closeDialog() {
        this.$refs.addForm.resetFields();
        this.addForm = {}
        this.isShow = false;
      }
    }
  }
</script>
<style lang="less" scoped="scoped">
  .dialog_lj{
    /deep/.el-form-item__label{
      width: 80px;
    }
    /deep/.el-input__inner{
      text-align: left;
    }
    /deep/.el-select{
      width: 100%;
    }
    /deep/.el-input-number{
      width: 100%;
    }
  }
</style>