|
|
@@ -0,0 +1,168 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="isOpenDialog"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ top="5vh"
|
|
|
+ title="添加指标"
|
|
|
+ @close="cancelHandle"
|
|
|
+ custom-class="dialog"
|
|
|
+ center
|
|
|
+ width="800px"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-loading="isAddLoading"
|
|
|
+ element-loading-text="加载时间大概五分钟，关闭弹窗不影响加载"
|
|
|
+ element-loading-spinner="el-icon-loading">
|
|
|
+ <div class="dialog-main">
|
|
|
+ <el-form :model="edbForm" ref="edbFormDataListRef" >
|
|
|
+ <el-table :data="edbForm.edbDataList" max-height="500px">
|
|
|
+ <el-table-column label="指标ID">
|
|
|
+ <template slot-scope="{row,$index}">
|
|
|
+ <el-form-item :prop="`edbDataList.${$index}.edbId`"
|
|
|
+ :rules="[{required:true,message:'指标ID不能为空',trigger:'blur'},
|
|
|
+ {validator:checkAge,trigger:'blur'}]">
|
|
|
+ <el-input v-model.trim="row.edbId" placeholder="请输入指标ID"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="所属分类">
|
|
|
+ <template slot-scope="{row,$index}">
|
|
|
+ <el-form-item :prop="`edbDataList.${$index}.classify`"
|
|
|
+ :rules="{required:true,message:'所属分类不能为空',trigger:'blur'}">
|
|
|
+ <el-cascader
|
|
|
+ class="classify-cascader"
|
|
|
+ v-model="row.classify"
|
|
|
+ :options="classifyOptions"
|
|
|
+ :key="$index"
|
|
|
+ :props="{
|
|
|
+ label: 'ClassifyName',
|
|
|
+ value: 'BaseFromMysteelChemicalClassifyId',
|
|
|
+ children: 'Children',
|
|
|
+ emitPath: false,
|
|
|
+ }"
|
|
|
+ placeholder="请选择分类"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="80px">
|
|
|
+ <template slot-scope="{row,$index}">
|
|
|
+ <span v-if="edbForm.edbDataList.length>1" @click="delEdbItem($index)">删除</span>
|
|
|
+ <span v-if="$index==(edbForm.edbDataList.length-1)" @click="addEdbItem(row,`edbDataList.${$index}`)">添加</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="dia-bot">
|
|
|
+ <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" plain @click="cancelHandle">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ isOpenDialog: {
|
|
|
+ type: Boolean,
|
|
|
+ },
|
|
|
+ classifyList: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isOpenDialog(newval) {
|
|
|
+ if (newval) {
|
|
|
+ let classifyArr = _.cloneDeep(this.classifyList);
|
|
|
+ this.filterNodes(classifyArr);
|
|
|
+ this.classifyOptions = classifyArr;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ this.checkAge=(rule, value, callback) => {
|
|
|
+ // 不能输入中文和空格
|
|
|
+ let reg = /[\u4e00-\u9fa5]+|\s+/
|
|
|
+ if(reg.test(value)){
|
|
|
+ return callback(new Error('不能输入中文和空格'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return{
|
|
|
+ isAddLoading: false,
|
|
|
+ classifyOptions:[],
|
|
|
+ edbForm:{edbDataList:[{edbId:'',classify:''}]}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ saveHandle(){
|
|
|
+ this.$refs.edbFormDataListRef.validate((valid)=>{
|
|
|
+ if(valid){
|
|
|
+ console.log('验证通过');
|
|
|
+ }else{
|
|
|
+ this.$message.error("验证不通过，请检查")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 取消 */
|
|
|
+ cancelHandle() {
|
|
|
+ this.isAddLoading = false;
|
|
|
+ this.edbForm={edbDataList:[{edbId:'',classify:''}]}
|
|
|
+ this.$refs.edbFormDataListRef.resetFields();
|
|
|
+ this.$emit("update:isOpenDialog", false);
|
|
|
+ },
|
|
|
+ // 递归改变第三级目录结构
|
|
|
+ filterNodes(arr) {
|
|
|
+ arr.length &&
|
|
|
+ arr.forEach((item) => {
|
|
|
+ item.Children &&
|
|
|
+ item.Children.length &&
|
|
|
+ this.filterNodes(item.Children);
|
|
|
+ if (item.Level === 2) {
|
|
|
+ delete item.Children;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addEdbItem(row,prop){
|
|
|
+ let propArray=Object.keys(row).map(key=> prop+'.'+key )
|
|
|
+ console.log(row,'row',propArray,'propArray');
|
|
|
+ let errorFlag=false
|
|
|
+ this.$refs.edbFormDataListRef.validateField(propArray,(error)=>{
|
|
|
+ if(error){
|
|
|
+ errorFlag=true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(errorFlag) return
|
|
|
+ if(this.edbForm.edbDataList.length>=100){
|
|
|
+ this,$message.warning('添加数量已达上限（上限100）！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.edbForm.edbDataList.push({edbId:'',classify:row.classify})
|
|
|
+ },
|
|
|
+ delEdbItem(index){
|
|
|
+ this.edbForm.edbDataList.splice(index,1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.dialog-main {
|
|
|
+ padding-left: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.dia-bot {
|
|
|
+ margin: 52px 0 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+// .dialog-main .classify-cascader .el-input {
|
|
|
+// width: 100%;
|
|
|
+// }
|
|
|
+</style>
|
hbchen