laws_weilai/jero-web/src/views/projectManagement/components/TaskListModel.vue

<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="visible = false"
  >
    <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
      <a-row :gutter="24">
        <a-col :span="24" v-if="title == $t('CertificationProgress')">
          <div class="box-title-text">
            <div class="title-text">
              <span class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('CertificationProgress')">{{$t('CertificationProgress')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="remarks">
              <a-select :placeholder="$t('PleaseSelect')+$t('CertificationProgress')">
                <a-select-option :key="1" :value="1">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('experimentPassed') }}
                     </span>
                </a-select-option>
                <a-select-option :key="2" :value="2">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('experimentFailed') }}
                     </span>
                </a-select-option>
                <a-select-option :key="3" :value="3">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('toBeStarted') }}
                     </span>
                </a-select-option>
                <a-select-option :key="4" :value="4">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('inProgress') }}
                     </span>
                </a-select-option>
                <a-select-option :key="5" :value="5">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('notInvolved') }}
                     </span>
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </div>
        </a-col>

        <a-col :span="24" v-if="title == $t('CertificationProgress')">
          <div class="box-title-text">
            <div class="title-text">
              <span class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('remarks')">{{$t('remarks')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="remarks">
              <a-textarea
                :placeholder="$t('PleaseEnter')+$t('remarks')"
                :disabled="false"
                v-model="formInline.remark" :rows="4"/>
            </a-form-model-item>
          </div>
        </a-col>

        <a-col :span="24" v-if="title == $t('CurrentProjectStatusEvaluation')">
          <div class="box-title-text">
            <div class="title-text">
              <span class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('CurrentProjectStatusEvaluation')">{{$t('CurrentProjectStatusEvaluation')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="remarks">
              <a-select :placeholder="$t('PleaseSelect')+$t('CurrentProjectStatusEvaluation')">
                <a-select-option :key="1" :value="1">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('green') }}
                     </span>
                </a-select-option>
                <a-select-option :key="2" :value="2">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('red') }}
                     </span>
                </a-select-option>
                <a-select-option :key="3" :value="3">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('blue') }}
                     </span>
                </a-select-option>
                <a-select-option :key="4" :value="4">
                     <span style="display: inline-block;width: 100%">
                            {{ $t('yellow') }}
                     </span>
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </div>
        </a-col>

        <a-col :span="24" v-if="title == $t('CurrentProjectStatusEvaluation')">
          <div class="box-title-text">
            <div class="title-text">
              <span class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('remarks')">{{$t('remarks')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="remarks">
              <a-textarea
                :placeholder="$t('remarks')"
                :disabled="false"
                v-model="formInline.remark" :rows="4"/>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
  export default {
    name: 'TaskListModel',
    data() {
      return {
        formInline: {},
        rules: {},
        title: this.$t('CertificationProgress'),
        visible: false,
        confirmLoading: false
      }
    },
    mounted() {

    },
    methods: {
      getData(val, title) {
        this.visible = true
        this.title = title
      },
      handleOk() {

      }
    }
  }
</script>

<style scoped>
  .box-title-text {
    line-height: 1.4;
    display: flex;
  }

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

  .title-text {
    width: 134px;
    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: 42px;
  }

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

  .itemModel {
    width: calc(100% - 130px);
    display: inline-block;
    margin-top: 2px;
  }

  .title-text-text {
    margin-top: 9px;
  }
</style>