rt-sim-training-client/src/views/drts/scene/operateStatistic.vue

<template>
  <div v-if="dialogShow" class="OperateStatistic">
    <div class="OperateStatisticIn">
      <div class="OperateStatisticInName">编辑运营统计</div>
      <div class="OperateStatisticContent">
        <el-form ref="dataform" :rules="rules" :model="formModel" label-width="140px" class="statisticForm" @submit.native.prevent>
          <el-form-item label="每一项分值" :required="true" prop="score">
            <el-input-number
              v-model="formModel.score"
              :style="{width: '130px'}"
              :min="0"
              size="medium"
              :max="100"
              :step="1"
            />
          </el-form-item>
          <el-form-item label="运营统计项列表" :required="true" prop="itemVOS">
            <el-button type="primary" size="small" style="margin-bottom:10px" @click="addItemVO">添加</el-button>
            <el-table :data="formModel.itemVOS" border style="width:351px;" height="200">
              <el-table-column prop="description" label="简介" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.description" type="text" :style="{width: '125px'}" size="small" :maxlength="100" />
                </template>
              </el-table-column>
              <el-table-column prop="stepId" label="关联步骤" width="150">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.stepId" :style="{width: '125px'}" size="small">
                    <el-option
                      v-for="option in stepVOs"
                      :key="option.id"
                      :label="option.description"
                      :value="option.id"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <span class="el-icon-error deleteScene" @click="handleDelete(scope.$index)" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
      <div class="OperateStatistic-footer">
        <el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
        <el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    name:'OperateStatistic',
    data() {
        return {
            dialogShow:false,
            stepVOs:[],
            formModel:{
                score:0,
                itemVOS:[]
                // private String description;
                // private Long stepId;
            }
        };
    },
    computed:{
        rules() {
            const crules = {
                score: [
                    { required: true, message: '请输入每一项分值', trigger: 'blur' },
                    { required: true, message: '请输入每一项分值', trigger: 'change' }
                ]};
            return crules;
            // itemVOS
        }
    },
    methods:{
        roleDoClose() {
            this.dialogShow = false;
        },
        confirm() {
            const self = this;
            this.$refs.dataform.validate(() => {
                const itemVOS = self.formModel.itemVOS;
                if (itemVOS.length > 0) {
                    let result = true;
                    itemVOS.forEach(item=>{
                        if (item.description && item.stepId) {
                            result = result && true;
                        } else {
                            result = result && false;
                        }
                    });
                    if (!result) {
                        this.$messageBox('请填写运营统计项列表');
                    }
                }
                this.dialogShow = false;
                this.$emit('submitOperateStatistic', this.formModel);
            });
        },
        doShow(stepVOs, operationStatisticVO) {
            if (JSON.stringify(operationStatisticVO) != '{}') {
                this.formModel = operationStatisticVO;
            }
            this.stepVOs = Object.values(stepVOs);
            this.stepDescription = '';
            this.dialogShow = true;
        },
        addItemVO() {
            this.formModel.itemVOS.push({'description':'', stepId:''});
        },
        handleDelete(index) {
            this.formModel.itemVOS.splice(index, 1);
        }
    }
};
</script>
<style lang="scss">
.OperateStatistic{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.7);
    z-index: 2;
}
.OperateStatisticIn{
    width: 600px;
    background: #fff;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 40%;
    height: 450px;
    border-radius:4px;
}
.OperateStatistic-footer{
    text-align: center;
}
.OperateStatisticInName{
    font-size: 17px;
    margin-top: 16px;
    text-align: center;
}
.OperateStatisticContent{
    padding: 20px 0px 0px 0px;
}
.statisticForm{
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.deleteScene{
    font-size: 24px;
    color: #f00;
    cursor: pointer;
}
</style>