eep_page/src/views/org_manage/components/UpdateOrgField.vue

<template>
  <el-dialog
    :title="`更新${fieldObj[field]}`"
    :visible="visible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <template v-if="['name'].includes(field)">
      <el-input v-model="stringValue" type="text" />
    </template>

    <template v-if="['memo'].includes(field)">
      <el-input v-model="stringValue" type="textarea" :autosize="{ minRows: 4 }" maxlength="1500" show-word-limit />
    </template>

    <template v-if="['use_end_date_book_edit', 'use_end_date_book_store'].includes(field)">
      <el-date-picker
        v-model="stringValue"
        type="date"
        placeholder="选择日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      />
    </template>

    <template v-if="['user_count_max', 'project_count_max', 'speech_engine_lave_can_use_count'].includes(field)">
      <el-input v-model="stringValue" type="number" />
    </template>

    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'UpdateOrgField',
  props: {
    field: {
      type: String,
      required: true,
    },
    value: {
      type: [String, Number, Array, Object],
      required: true,
    },
    orgId: {
      type: String,
      required: true,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fieldObj: {
        name: '名称',
        user_count_max: '最大用户量',
        project_count_max: '最大项目量',
        speech_engine_lave_can_use_count: '语音引擎剩余可用次数',
        use_end_date_book_edit: '教材编辑使用期限',
        use_end_date_book_store: '教材仓库使用期限',
        memo: '备注',
      },
      stringValue: this.value,
    };
  },
  computed: {
    dialogWidth() {
      if (['use_end_date_book_edit', 'use_end_date_book_store'].includes(this.field)) {
        return '260px';
      }
      return '550px';
    },
  },
  watch: {
    value(newVal) {
      this.stringValue = newVal;

      if (['use_end_date_book_edit', 'use_end_date_book_store'].includes(this.field)) {
        const date = new Date();
        this.stringValue = newVal === '0-00-00' ? `${date.getFullYear()}-${date.getMonth()}-${date.getDay()}` : newVal;
      }
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.$emit('updateOrgFieldValue', this.field, this.stringValue);

      this.handleClose();
    },
  },
};
</script>

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