实训案例新增界面 量化指标部分

src/views/train/case-detail.vue

@@ -25,17 +25,56 @@
             <el-card class="box-card">
                 <div slot="header">
                     <span class="item-title-font"><i class="el-icon-minus icon-minus-rotated"></i>判分设置</span>
+                    <!--<span style="float: right;vertical-align: middle;line-height: 29px;">合计：{{dataForm.totalScore}} 分</span>-->
                 </div>
-                <div>
+                <div class="target-set">
-                    <div><p>量化指标：</p>
+                    <el-row :gutter="20">
-                        <el-transfer
+                        <el-col :span="8">
-                                filterable
+                            <el-table ref="leftTable" :data="tableData.filter(data => !searchName || data.name.toLowerCase().includes(searchName.toLowerCase()))"
-                                :filter-method="filterMethod"
+                                      height="400" border highlight-current-row tooltip-effect="dark" @selection-change="handleSelectionChange">
-                                filter-placeholder="请输入指标名称"
+                                <el-table-column type="selection" width="55"></el-table-column>
-                                v-model="value"
+                                <el-table-column label="0/10">
-                                :data="data">
+                                    <el-table-column prop="name" label="名称" show-overflow-tooltip>
-                        </el-transfer>
+                                        <template slot="header" slot-scope="scope">
-                    </div>
+                                            <el-input v-model="searchName" size="mini" placeholder="输入指标名称模糊搜索"/>
+                                        </template>
+                                    </el-table-column>
+                                </el-table-column>
+                            </el-table>
+                        </el-col>
+                        <el-col :span="1" style="text-align:center;padding-top: 160px;">
+                            <el-button @click="addStaff" type="primary" icon="el-icon-arrow-right" circle></el-button>
+                            <el-button @click="removeStaff" type="primary" icon="el-icon-arrow-left" circle style="margin-left: 0;margin-top: 10px;"></el-button>
+                        </el-col>
+                        <el-col :span="15">
+                            <el-table ref="rightTable" :data="tableData" height="400" border highlight-current-row tooltip-effect="dark" @selection-change="handleSelectionChange">
+                                <el-table-column type="selection" width="55"></el-table-column>
+                                <el-table-column label="已选择 0/10，剩余可配置分数 90 分">
+                                    <el-table-column prop="name" label="名称"></el-table-column>
+                                    <el-table-column prop="target" label="任务目标">
+                                        <template slot-scope="scope">
+                                            <el-form-item :prop="'tradeList.'+scope.$index+'.score'" :rules="dataRule.score" class="score-input" >
+                                                <el-select size="small" style="width: 100px;">
+                                                    <el-option label="大于" value="1"></el-option>
+                                                    <el-option label="小于" value="2"></el-option>
+                                                </el-select>
+                                                <el-input size="small" v-model.trim="scope.row.score" :disabled="formAction == 2" style="width: 120px;">
+                                                    <template slot="append">%</template>
+                                                </el-input>
+                                            </el-form-item>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="score" label="分数">
+                                        <template slot-scope="scope">
+                                            <el-form-item :prop="'tradeList.'+scope.$index+'.score'" :rules="dataRule.score" class="score-input">
+                                                <el-input size="small" v-model.trim="scope.row.score" :disabled="formAction == 2" style="width: 160px;"></el-input>
+                                            </el-form-item>
+                                        </template>
+                                    </el-table-column>
+                                </el-table-column>
+                            </el-table>
+                        </el-col>
+                    </el-row>
                 </div>
             </el-card>
         </el-form>
@@ -70,6 +109,32 @@
                 }
             };
             return {
+                tableData: [{
+                    name: '王小虎',
+                }, {
+                    name: '王小虎',
+                }, {
+                    name: '王小虎',
+                }, {
+                    name: '王小虎',
+                }, {
+                    name: '王小虎',
+                }],
+                searchName: '',
+                tableData2: [{
+                    name: '王小虎',
+                }, {
+                    name: '王小虎',
+                }, {
+                    name: '王小虎',
+                }, {
+                    name: '王小虎',
+                }, {
+                    name: '王小虎',
+                }],
+                currentRowData: null,
+                currentPageData: [], //左边的数据需要从数据库查询
+                yxData: [],
                 isShowData: false,
                 tradeDialogVisible: false,
                 isShowTradeDelBtn: false,
@@ -380,13 +445,15 @@
             .el-form-item.is-required .el-form-item__label:after {
                 content: '';
             }
-
+            .target-set{
                 .score-input {
                     margin-bottom: 0px;
                     /deep/ .el-form-item__error {
                         position: unset;
                     }
                 }
+            }
+
             .icon-minus-rotated:before {
                 -ms-transform: rotate(90deg); /* IE 9 */
                 -moz-transform: rotate(90deg); /* Firefox */