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

<!--批量当前状态-->
<template>
  <a-modal
    :title="title"
    :width="700"
    :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">
        <div class="headerText">
          {{this.$t('redSchedule')}}<br/>
          {{this.$t('yellowSchedule')}}<br/>
          {{this.$t('greenRequirements')}}<br/>
          {{this.$t('blueUndeterminedState')}}
        </div>
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
                      <span class="title-text-text"
                            :title="$t('CurrentProjectStatusEvaluation')">{{$t('CurrentProjectStatusEvaluation')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="conditionAssessment">
              <a-select
                :disabled="disabled"
                v-model="formInline.conditionAssessment"
                :placeholder="$t('PleaseSelect')+$t('CurrentProjectStatusEvaluation')">
                <a-select-option :value="'1'">
                             <span style="display: inline-block;width: 100%">
                                    {{ $t('red') }}
                             </span>
                </a-select-option>
                <a-select-option :value="'2'">
                             <span style="display: inline-block;width: 100%">
                                    {{ $t('yellow') }}
                             </span>
                </a-select-option>
                <a-select-option :value="'3'">
                             <span style="display: inline-block;width: 100%">
                                    {{ $t('green') }}
                             </span>
                </a-select-option>

                <a-select-option :value="'4'" disabled>
                               <span style="display: inline-block;width: 100%">
                                     {{ $t('blue') }}
                                </span>
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </div>
        </a-col>

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

      </a-row>
    </a-form-model>
  </a-modal>
</template>

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

export default {
  name: 'TaskListModel',
  data() {
    return {
      formInline: {},
      rules: {},
      selectionRowsArray:[],
      projectLawsInventoryIds:[],
      roleCodes:[],
      visible: false,
      confirmLoading: false,
      studioList: [],
      disabled: false,
      url: {
        edit: '/project/projectTaskInventoryEO/edit',
        addOrUpdate: '/project/projectTaskInventoryConditionAssessmentEO/addOrUpdate',
        list: '/project/projectTaskInventoryConditionAssessmentEO/list'
      }
    }
  },
  mounted() {

  },
  methods: {
    getData(val) {
      this.visible = true
      this.title = this.$t('BatchChangeStatus')
      this.selectionRowsArray = val
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    getList(val) {
      getAction(this.url.list, { projectLawsInventoryId: val.projectLawsInventoryId }).then((res) => {
        if (res.success) {
          this.studioList = res.result || []
        } else {
          this.studioList = []
        }
      })
    },
    handleInput(value) {
      this.$nextTick(() => {
        this.formInline = { ...this.formInline }
        this.$refs.ruleForm.validateField([value])
      })
    },
    handleOk() {
      if (this.disabled) {
        this.visible = false
        return
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let query = {}
          let projectLawsInventoryIds = []
          let roleCodes = []
          let url = ''
          let Action
          this.selectionRowsArray.forEach((item,index) => {
            projectLawsInventoryIds.push(item.projectLawsInventoryId)
            roleCodes.push(item.roleCode)
          })
            query = {
              roleCodes: roleCodes.join(','),
              remark: this.formInline.remark,
              conditionAssessment: this.formInline.conditionAssessment,
              projectLawsInventoryIds: projectLawsInventoryIds.join(',')
            }
            url = this.url.addOrUpdate
            Action = postAction
          this.confirmLoading = true
          Action(url, query).then((res) => {
            if (res.success) {
              this.visible = false
              this.confirmLoading = false
              this.$message.success(this.$t('OperationSuccessful'))
              this.$emit('TaskListModelList')
            } else {
              this.$message.warning(this.$t('operationFailed'))
              this.confirmLoading = false
            }
          })
        }
      })
    }
  }
}
</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;
}

.headerText {
  margin-left: 30px;
  color: #040B29;
  font-weight: 400;
}
</style>