【接口看板】更换AG可行性开发暂存

PC/InterFace.Dash/src/components/AGTable/agGridBtn.vue

@@ -1,23 +1,42 @@
 <template>
     <div>
-        <el-button @click="clickHandle('edit')" size="small" type="text">编辑</el-button>
-        <el-button @click="clickHandle('delete')" size="small" type="text">删除</el-button>
+        <el-button 
+            v-if="!item.hide"
+            v-for="(item,index) in buttons"
+            :key="index"
+            @click="clickHandle(item)" 
+            :size="item.size" 
+            :type="item.type"
+            :style="'color:'+item.color"
+        >{{item.label}}</el-button>
     </div>
 </template>
 <script>
+import AGTableBttons from "@/components/AGTable/btnControls.js" 
 export default {
     data() {
         return {
+            propsInit:null,//传参数据
+            buttons:[
+                AGTableBttons.tableEditBtn,
+                AGTableBttons.tableDeleteBtn,
+            ],
             cellValue:null
         };
     },
     mounted(){
-        console.log(16,this.params.api.getRowNode(2))
+        this.propsInit = this.params.colDef.cellRendererParams
+        console.log(33,this.propsInit.currency)
         this.cellValue = this.params.data;
     },
     methods:{
         clickHandle(data){
-            console.log(data,this.cellValue)
+            if(data.name == 'delete'){
+                AGTableBttons.deleteHandle(()=>{
+                    console.log(33,this.cellValue)
+                })
+            }
+            // console.log(data,this.cellValue)
         },
         // getValueToDisplay(params) {
         //     return this.params.api.getRowNode(params.rowIndex).data

PC/InterFace.Dash/src/components/AGTable/btnControls.js

@@ -0,0 +1,42 @@
+// 页面基础按钮样式
+import i18n from "@/lang"
+import { MessageBox } from 'element-ui';
+
+// 编辑按钮
+const tableEditBtn= {
+    type: "text",
+    icon: "el-icon-edit",
+    label: i18n.t('btns.edit'),
+    name: "edit",
+    size: "small",
+    color: "#ff9000",
+}
+
+// 删除按钮
+const tableDeleteBtn= {
+    type: "text",
+    icon: "el-icon-delete",
+    label: i18n.t('btns.delete'),
+    name: "delete",
+    size: "small",
+    color: "red",
+}
+
+const deleteHandle = (callback) => {
+    MessageBox.confirm('您确定删除吗, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        // 确定操作
+        if(callback)callback()
+    }).catch(() => {
+        //取消操作
+    });
+}
+
+export default {
+    tableEditBtn,
+    tableDeleteBtn,
+    deleteHandle
+}

PC/InterFace.Dash/src/components/AGTable/index.vue

@@ -22,6 +22,11 @@ export default {
     agGridBtn
   },
   props:{
+    // 操作列按钮组件名
+    agGridBtnName:{
+      type: String,
+      default:'agGridBtn'
+    },
     // 已app-main高度为100%  需要减掉的高度
     setUTableHeight: {
       type: Number,
@@ -58,7 +63,10 @@ export default {
           {
               field:'操作',
               lockPosition: 'left',
-              cellRenderer: 'agGridBtn',
+              cellRenderer: this.agGridBtnName,
+              cellRendererParams: {
+                currency: 'EUREUREUREUREUREUR'
+              },
               cellClass: 'locked-col',
               width: 120,
               suppressNavigable: true,

PC/InterFace.Dash/src/components/tablePagination/index.vue

@@ -45,6 +45,7 @@
       <AGTable
         ref="tablePaginationTableRef"
         :setUTableHeight="uTableTopHeight"
+        :agGridBtnName="'agGridBtn'"
       ></AGTable>
       <!-- <umyTable
         :isUpdate="isUpdate"