Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/plShow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,388 @@
<template>
  <div>
    <el-tabs v-model="areaType" type="card" @tab-click="handleClick">
      <el-tab-pane v-if="uiDefineData.plIsShowNavigator" label="导航区" name="1"></el-tab-pane>
      <el-tab-pane v-if="uiDefineData.plIsShowForm" label="控制区" name="2"></el-tab-pane>
      <el-tab-pane v-if="uiDefineData.plIsShowTab" label="操作区" name="3"></el-tab-pane>
    </el-tabs>
    <avue-crud
      ref="crud"
      :data="data"
      :option="option"
      :table-loading="tableLoading"
      @selection-change="selectChangeHandler"
      @row-click="rowClickHandler">
      <template slot="menuLeft">
        <el-button icon="el-icon-plus" size="small" type="primary" @click="addHandler">创建</el-button>
        <!--<el-button icon="el-icon-edit" plain size="small" type="primary" @click="editHandler">修改</el-button>
        <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delHandler">删除</el-button>-->
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button icon="el-icon-edit" size="small" type="text" @click="rowEditBtnClick(scope.row)">编辑
        </el-button>
        <el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除
        </el-button>
      </template>
      <template slot="plIsOpen" slot-scope="{row}">
        <el-tag v-if="row.plIsOpen === 1" type="success">启用</el-tag>
        <el-tag v-else type="danger">未启用</el-tag>
      </template>
    </avue-crud>
    <bottom-table :sourceData="selectList[0]" :height="'280px'" style="margin-top: 15px;"></bottom-table>
    <!-- åˆ›å»ºç¼–辑自定义对话框    -->
    <el-dialog
      v-dialogDrag
      v-loading="dialogLoading"
      :title="dialogType === 'add' ? ' åˆ›å»º é¡µç­¾' : '编辑 é¡µç­¾'"
      :visible.sync="dialogVisible"
      append-to-body="true"
      class="avue-dialog"
      :close-on-click-modal="false"
      width="800px"
      @close="dialogClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="页面编码：" prop="plCode">
              <el-input v-model="form.plCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称：" prop="plName">
              <el-input v-model="form.plName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序号：" prop="plSeq">
              <el-input v-model="form.plSeq"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="plIsOpen">
              <el-switch v-model="form.plIsOpen" :active-value="1"  :inactive-value="0"   active-color="#13ce66"  inactive-color="#ff4949"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="显示表达式：" prop="plOpenExpression">
          <el-input type="textarea" :rows="3" v-model="form.plOpenExpression"></el-input>
        </el-form-item>
        <el-form-item label="国际化标准：" prop="plLabel">
          <el-input type="textarea" :rows="1" v-model="form.plLabel"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="plDesc">
          <el-input type="textarea" :rows="1" v-model="form.plDesc"></el-input>
        </el-form-item>
        <el-form-item label="UI解析类：" prop="plUIParser">
          <el-input type="textarea" :rows="2" v-model="form.plUIParser"></el-input>
        </el-form-item>
        <div class="tip">
          <div style="color: #D40000">示例：java_cs:xxx;java_bs:xxx;net_cs:xxx;net_bs:xxx;mobile_cs:xxx;mobile_bs:xxx;</div>
          <div>1、用英文半角分号;分隔各组值。</div>
          <div>2、每组用英文半角冒号:分隔单一拓展属性名称及属性值。</div>
          <div>3、其中的xxx是各种解析类的完整类型名称（完全限定名）。</div>
          <div>4、输入时，不要敲回车换行。</div>
        </div>
        <el-form-item label="拓展属性：" prop="plExtAttr">
          <el-input type="textarea" :rows="2" v-model="form.plExtAttr"></el-input>
        </el-form-item>
        <div class="tip">
          <div style="color: #D40000">示例：ext1:xx;ext2:xx;ext3:xxx;ext4:xxx;extn:xxx</div>
          <div>1、用英文半角分号;分隔各组值。</div>
          <div>2、每组用英文半角冒号:分隔单一拓展属性名称及属性值。</div>
          <div>3、可以定义任意组，但总字符长度不得超过4000。</div>
          <div>4、输入时，不要敲回车换行。</div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogClose">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="saveHandler">ç¡® å®š</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import basicOption from "@/util/basic-option";
import {
  getTabByContextIdAndType,
  addTabData,
  updateTabData,
  deleteTabData,
} from "@/api/UI/uiDefine";
import func from "@/util/func";
import bottomTable from "./bottomTable/index";

export default {
name: "plShow",
  props: {
    uiDefineData: {
      type: Object,
      default: {}
    },
  },
  components:{bottomTable},
  data() {
    return {
      uiDefineOid:'',
      areaType: '',
      tableLoading: false,
      selectList: [],
      option: {
        ...basicOption,
        height:'300px',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        index:false,
        menuWidth:160,
        align:'left',
        column: [{
          label: '序号',
          prop: 'plSeq',
          width:50
        }, {
          label: '编码',
          prop: 'plCode',
          width:180
        }, {
          label: '名称',
          prop: 'plName',
          width:200
        }, {
          label: '是否启用',
          prop: 'plIsOpen',
          align:'center',
          width: 90
        }, {
          label: '显示表达式',
          prop: 'plOpenExpression',
          overHidden:true,
          width:300
        }, {
          label: 'UI解析类',
          prop: 'plUIParser'
        }, {
          label: '拓展属性',
          prop: 'plExtAttr'
        }, {
          label: '描述',
          prop: 'plDesc'
        }]
      },
      data: [],
      dialogLoading: false,
      dialogVisible: false,
      dialogType: '',
      form: {
        plSeq: '',
        plCode: '',
        plName: '',
        plIsOpen:0,
        plOpenExpression:'',
        plLabel:'',
        plUIParser:'',
        plExtAttr:'',
        plDesc:''
      },
      rules: {
        plName: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        plCode: [{
          required: true,
          message: '请输入编码',
          trigger: 'blur'
        }],
        plSeq: [{
          required: true,
          message: '请输入序号',
          trigger: 'blur'
        }]
      },
    }
  },
  watch: {
    uiDefineData:{
      handler(val) {
        if(val && val.plOId) {
          if (val.plIsShowNavigator) {
            this.areaType = '1';
          }else if(val.plIsShowForm){
            this.areaType = '2'
          }else{
            this.areaType = '3'
          }
          this.getTableList()
        }
      },
      immediate: true,
      deep:true
    }
  },
  created() {
    this.uiDefineOid=this.$route.params.uiDefineOid;
  },
  methods: {
    handleClick(tab, event) {
      this.getTableList()
    },
    getTableList(){
      const params = {
        contextId:this.uiDefineData.plOId,
        areaType:this.areaType
      }
      getTabByContextIdAndType( params).then(res => {
        this.data = res.data.data;
        this.selectList=[];
        this.$refs.crud.clearSelection();
        this.tableLoading = false;
      })
    },
    selectChangeHandler(row) {
      this.selectList = row;
    },
    // è¡Œç‚¹å‡»
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },
    //创建
    addHandler(){
      this.form={
        plSeq: '',
        plCode: '',
        plName: '',
        plIsOpen:0,
        plOpenExpression:'',
        plLabel:'',
        plUIParser:'',
        plExtAttr:'',
        plDesc:''
      };
      this.dialogType = 'add';
      this.dialogVisible = true;
    },
    editHandler(){
      if(this.selectList.length!=0){
        this.rowEditBtnClick(this.selectList[0]);
      }else {
        this.$message.error('请选择一条数据进行编辑');
      }
    },
    delHandler(){
      if (this.selectList.length <= 0) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      const params = {
        oids: this.selectList.map(item => item.plOId).join(',')
      }
      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTabData(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success('删除成功');
            this.getTableList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // ç¼–辑按钮
    rowEditBtnClick(row) {
      this.form=row;
      this.dialogType = 'edit';
      this.dialogVisible = true;
    },
    // åˆ é™¤æŒ‰é’®
    rowDeleteHandler(row) {
      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTabData({oids: row.plOId}).then(res => {
          if (res.data.code === 200) {
            this.$message.success('删除成功');
            this.getTableList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // å…³é—­å¯¹è¯æ¡†
    dialogClose() {
      this.dialogVisible = false;
      this.$refs.form.clearValidate();
      this.form = {
        plName: '',
        plCode: '',
        plDesc:'',
        plIsShow: [],
      }
    },
    // ä¿å­˜é¡µç­¾
    saveHandler() {
      this.$refs.form.validate((valid,done) => {
        if (valid) {
          const params = {
            plAreaType:parseInt(this.areaType),
            plContextOId:this.uiDefineData.plOId,
            ...this.form
          }
          if (this.dialogType === 'add') {
            addTabData(params).then(res => {
              if (res.data.code === 200) {
                this.$message.success('添加成功');
                this.dialogClose();
                this.getTableList();
              }
            })
          } else if (this.dialogType === 'edit') {
            updateTabData(params).then(res => {
              if (res.data.code === 200) {
                this.$message.success('修改成功');
                this.dialogClose()
                this.getTableList();
              }
            })
          }
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.tip{
  font-size: 12px;
  color: #909399;
  margin: -13px 0 10px 100px;
}
</style>