hir_web/src/views/system/public-log/components/LogForm.vue

<template>
  <base-model :config="model_cfg">
    <template slot="dialog-body">
      <el-form
        ref="LogForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-width="120px"
        size="small"
      >
        <el-form-item :label="$t('system:log:form:version')" prop="Version">
          <el-input v-model="form.Version" />
        </el-form-item>
        <el-form-item :label="$t('system:log:form:versionUS')" prop="Version">
          <el-input v-model="form.Version_US" />
        </el-form-item>
        <el-form-item
          :label="$t('system:log:form:updateContent')"
          prop="UpdateContent"
        >
          <el-input
            v-model="form.UpdateContent"
            type="textarea"
            maxlength="1000"
            :autosize="{ minRows: 4, maxRows: 5 }"
          />
        </el-form-item>
        <el-form-item :label="$t('system:log:form:State')" prop="State">
          <el-select v-model="form.State" placeholder="">
            <el-option
              v-for="item in $d.PublishStatus"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system:log:form:PublishTime')">
          <el-date-picker
            v-model="form.PublishTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:log:form:IsCurrentVersion')"
          prop="IsCurrentVersion"
        >
          <el-select v-model="form.IsCurrentVersion" placeholder="">
            <el-option
              v-for="item in $d.YesOrNo"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button size="small" type="primary" @click="handleCancle">
        {{ $t('common:button:cancel') }}
      </el-button>
      <el-button size="small" type="primary" @click="handleSave">
        {{ $t('common:button:save') }}
      </el-button>
    </template>
  </base-model>
</template>
<script>
import { addOrUpdatePublishLog } from '@/api/admin'
import BaseModel from '@/components/BaseModel'
const formDataDefault = () => {
  return {
    Id: null,
    Version: null,
    Version_US: null,
    PublishTime: null,
    UpdateContent: null,
    State: null,
    IsCurrentVersion: null,
  }
}
export default {
  name: 'LogForm',
  components: { BaseModel },
  data() {
    return {
      loading: false,
      form: formDataDefault(),
      rules: {
        Version: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          { max: 50, message: `${this.$t('common:ruleMessage:maxLength')} 50` },
        ],
        // PublishTime: [
        //   { required: true, message: '请注明', trigger: 'blur' }
        // ],
        IsCurrentVersion: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        State: [
          {
            required: true,
            message: this.$t('common:ruleMessage:select'),
            trigger: 'blur',
          },
        ],
        UpdateContent: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            max: 1000,
            message: `${this.$t('common:ruleMessage:maxLength')} 500`,
          },
        ],
      },
      model_cfg: {
        visible: false,
        showClose: true,
        width: '500px',
        title: '',
        appendToBody: true,
      },
    }
  },
  mounted() {},
  methods: {
    openDialog(title, data) {
      this.model_cfg.visible = true
      this.model_cfg.title = title
      if (Object.keys(data).length > 0) {
        for (const k in this.form) {
          if (data.hasOwnProperty(k)) {
            this.form[k] = data[k]
          }
        }
      } else {
        this.form = formDataDefault()
      }
    },
    handleSave() {
      this.$refs.LogForm.validate((valid) => {
        if (!valid) return
        this.loading = true
        addOrUpdatePublishLog(this.form)
          .then((res) => {
            this.loading = false
            this.$message.success(this.$t('common:message:savedSuccessfully'))
            this.model_cfg.visible = false
            this.$emit('getList')
          })
          .catch(() => {
            this.loading = false
          })
      })
    },
    handleCancle() {
      this.model_cfg.visible = false
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-select,
.el-date-editor {
  width: 100%;
}
</style>