laws_weilai/jero-web/src/views/projectManagement/projectLibrary/components/changeExtensionModel.vue

<template>
  <a-drawer
    :title="$t('changeExtension')"
    :maskClosable="false"
    :width="600"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">
    <a-spin :spinning="confirmLoading">
      <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
        <a-row :gutter="24">
          <a-col :span="24">
            <div class="box-title-text">
              <div class="title-text">
                <span class="Required">*</span>
                <span class="title-text-text" :title="$t('projectVersion')">{{$t('projectVersion')}}</span>
              </div>
              <a-form-model-item class="itemModel" prop="projectVersion">
                <a-input class="box-input"
                         :disabled="true"
                         v-model="formInline.projectVersion"
                         :placeholder="$t('PleaseEnter')+$t('projectVersion')"/>
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <div class="box-title-text">
              <div class="title-text">
                <span class="title-text-text" :title="$t('explain')">{{$t('explain')}}</span>
              </div>
              <a-form-model-item class="itemModel" prop="explain">
                <a-textarea :placeholder="$t('pleaseEnter')+$t('explain')"
                            v-model="formInline.explain"
                            :rows="4"/>
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
  import { mapGetters } from 'vuex'

  export default {
    name: 'changeExtensionModel',
    props: ['url'],
    data() {
      return {
        formInline: {},
        confirmLoading: false,
        visible: false,
        yearNameDataList: [],
        rules: {
          explain: [
            {
              max: 300,
              message: this.$t('explain') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
              trigger: 'blur'
            }
          ],
          projectVersion:[
            {
              required: true,
              message: this.$t('projectVersion') + this.$t('cannotEmpty'),
              trigger: 'blur'
            }
          ],
        },
        disabled: false,
        projectNameList: [],
        title: ''
      }
    },
    mounted() {

    },
    methods: {
      ...mapGetters(['userInfo']),
      addModel(val) {
        this.visible = true
        this.formInline = {}
        this.formInline = { ...this.formInline }
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate()
        })
      },
      editModel(value) {
        this.visible = true
        this.formInline = value
        this.formInline = { ...this.formInline }
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate()
        })
      },
      handleCancel() {
        this.visible = false
      },
      handleSubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let url = ''
            let Action
            if (this.formInline.id) {
              url = this.url.edit
              Action = putAction
            } else {
              url = this.url.add
              Action = postAction
            }
            let query = JSON.parse(JSON.stringify(this.formInline))
            Object.keys(query).forEach(res => {
              if (query[res] && query[res] instanceof Array) {
                query[res] = query[res].join(',')
              }
            })
            this.confirmLoading = true
            Action(url, query).then((res) => {
              if (res.success) {
                this.confirmLoading = false
                this.$message.success(this.$t('OperationSuccessful'))
                this.visible = false
                this.$emit('addModelList')
              } else {
                this.$message.warning(res.message)
                this.confirmLoading = false
              }
            })
          }
        })
      }
    }
  }
</script>

<style>
  .formAdd .ant-form-item-label {
    width: 130px;
  }

  .formAdd .ant-form-item-control-wrapper {
    display: inline-block;
    width: 100%;
  }

  /*.formAdd .ant-form-item {*/
  /*  margin-bottom: 20px;*/
  /*}*/

  .itemModel .ant-form-item-control-wrapper {
    width: 100%;
  }

  .box-input .ant-select-selection--single {
    height: 38px;
  }

  .box-input .ant-select-selection--multiple {
    height: 38px;
  }

  .box-input .ant-select-selection__rendered {
    line-height: 38px;
    height: 38px;
  }

  .box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
    margin-top: 6px;
  }

  .box-input .ant-calendar-picker {
    line-height: 38px;
    height: 38px;
  }

  .box-input .ant-calendar-picker-input {
    height: 38px;
  }

  .box-input .ant-input-number-input-wrap {
    line-height: 38px;
    height: 38px;
  }
</style>
<style scoped>
  .box-title-text {
    line-height: 1.4;
    display: flex;
    /*align-items: center;*/
  }

  .title-text {
    width: 84px;
    text-align: right;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    margin-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 42px;
    line-height: 48px;
  }

  .box-input {
    display: inline-block;
    height: 38px;
    width: 100%;
  }

  .itemModel {
    width: calc(100% - 110px);
    display: inline-block;
    margin-top: 2px;
    height: 40px;
    margin-bottom: 24px;
  }

  .Required {
    color: red;
    margin-right: 4px;
  }

  .title-text-text {
    margin-top: 9px;
  }


  .formAdd {
    margin-bottom: 40px;
  }


  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    z-index: 100;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
<style>
  .ant-input-disabled {
    color: rgba(0, 0, 0, 0.65) !important;
  }
</style>