yxk-electronic-archives/src/views/collectReorganizi/collectionLibrary/module/blukEditing/index.vue

<template>
  <!--批量修改-->
  <el-dialog class="upload-dialog" title="批量修改" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="bulkEditingVisible">
    <div class="setting-dialog">
      <div class="bulk-editing-container">
        <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
          <el-form-item label="修改字段" prop="fieldItem">
            <el-select v-model="editForm.fieldItem" placeholder="请选择" style="width: 360px;">
              <el-option
                v-for="item in fieldItemOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="修改方式" prop="type">
            <el-select v-model="editForm.type" placeholder="请选择" style="width: 360px;">
              <el-option
                v-for="item in editTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="editForm.type === '替换'" label="查询内容" prop="content">
            <el-input v-model="editForm.queryContent" style="width: 360px;" />
          </el-form-item>
          <el-form-item label="更新内容" prop="content">
            <el-input v-if="editForm.fieldItem !== '2' && editForm.fieldItem !== '3'" v-model="editForm.content" style="width: 360px;" />
            <el-select v-if="editForm.fieldItem === '2'" v-model="editForm.content" placeholder="请选择" style="width: 360px;">
              <el-option
                v-for="item in fieldOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-date-picker
              v-if="editForm.fieldItem === '3'"
              v-model="editForm.content"
              type="date"
              placeholder="选择日期"
              style="width: 360px;"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="bulkEditingVisible = false">取消</el-button>
        <el-button type="primary" @click.native="onSubmitBlukEditing('editForm')">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'BlukEditing',
  components: { },
  mixins: [],
  data() {
    return {
      // 批量修改
      bulkEditingVisible: false,
      editForm: {
        fieldItem: '',
        type: '填充',
        queryContent: '',
        content: ''
      },
      fieldItemOptions: [
        {
          value: '1',
          label: '非字典项&&文本'
        },
        {
          value: '2',
          label: '字典项'
        },
        {
          value: '3',
          label: '日期'
        },
        {
          value: '4',
          label: '数字'
        }
      ],
      editTypeOptions: [],
      fieldOptions: [
        {
          value: '字典项1',
          label: '字典项1'
        }
      ]
    }
  },
  computed: {
    editRules() {
      const validateRule = {
        fieldItem: [
          { required: true, message: '请选择修改字段', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择修改方式', trigger: 'change' }
        ],
        queryContent: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        content: [
          { required: true }
        ]
      }
      if (this.editForm.fieldItem === '2') {
        this.$set(validateRule, 'content', [
          { required: true, message: '请选择需更新内容得字典项', trigger: 'change' }
        ])
      } else if (this.editForm.fieldItem === '3') {
        this.$set(validateRule, 'content', [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ])
      } else {
        this.$set(validateRule, 'content', [
          { required: true, message: '请输入更新内容', trigger: 'blur' }
        ])
      }
      return validateRule
    }
  },
  watch: {
    'editForm.fieldItem'(newVal) {
      this.$refs.editForm.clearValidate()
      this.editForm.content = ''
      this.editForm.type = '填充'
      if (newVal === '1') {
        this.editTypeOptions = [{
          value: '填充',
          label: '填充'
        },
        {
          value: '替换',
          label: '替换'
        }]
      } else if (newVal === '2' || newVal === '3') {
        this.editTypeOptions = [{
          value: '填充',
          label: '填充'
        }]
      } else if (newVal === '4') {
        this.editTypeOptions = [{
          value: '填充',
          label: '填充'
        },
        {
          value: '替换',
          label: '替换'
        },
        {
          value: '增加',
          label: '增加'
        },
        {
          value: '减少',
          label: '减少'
        }]
      }
    }
  },
  methods: {
    onSubmitBlukEditing(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message('submit!')
          this.bulkEditingVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>