cloud-web-corejs-haier 1.0.43 → 1.0.45

package/src/views/user/workbench_menu/list.vue

@@ -0,0 +1,555 @@
+<template>
+  <div id="containt">
+    <el-tabs v-model="activeName" class="tab-box">
+      <el-tab-pane :label="$t1('列表')" name="second">
+        <div class="grid-height">
+          <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
+                    @custom="$vxeTableUtil.customHandle">
+            <template #form>
+              <div class="clearfix screen-btns">
+                <div class="fl">
+                  <vxe-button status="primary" type="text" plain class="button-sty" icon="el-icon-plus" @click="addMenu()">
+                    {{ $t1('新增一级菜单') }}
+                  </vxe-button>
+                </div>
+                <div class="fr">
+                  <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
+                              plain>{{ $t1('重置') }}
+                  </vxe-button>
+                  <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">
+                    {{ $t1('搜索') }}
+                  </vxe-button>
+                </div>
+              </div>
+              <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData"
+                        @submit="searchEvent">
+                <vxe-form-item :title="$t1('菜单名称')+':'" field="menuName">
+                  <template v-slot>
+                    <el-input v-model="formData.menuName" size="small" clearable/>
+                  </template>
+                </vxe-form-item>
+                <vxe-form-item :title="$t1('菜单编码')+':'" field="menuCode">
+                  <template v-slot>
+                    <el-input v-model="formData.menuCode" size="small" clearable/>
+                  </template>
+                </vxe-form-item>
+                <vxe-form-item :title="$t1('是否启用')+':'" field="enabled">
+                  <template v-slot>
+                    <el-select v-model="formData.enabled" clearable>
+                      <el-option value="true" :label="$t1('启用')"></el-option>
+                      <el-option value="false" :label="$t1('禁用')"></el-option>
+                    </el-select>
+                  </template>
+                </vxe-form-item>
+              </vxe-form>
+            </template>
+            <template #menuImgEdit="{row,rowIndex}">
+              <el-popover
+                placement="bottom"
+                width="680"
+                trigger="click"
+                :ref="'menuImg'+rowIndex"
+              >
+                <div class="icons-box">
+                  <div class="item iconfont" v-for="(item,index) in iconList" :key="index"
+                       :class="[item,row.menuImg === item ? 'on':'']" @click="checkMenuImg(row,item,rowIndex)"></div>
+                </div>
+                <label class="icons-box_select" :class="{noNone:(!!row.menuImg)}" slot="reference">
+                  <i :class="row.menuImg" class="iconfont"></i>
+                  <i class="el-icon-arrow-down"></i>
+                  <i class="el-icon-circle-close icon-box_del" @click.stop="clearMenuImg(row)"></i>
+                </label>
+              </el-popover>
+
+            </template>
+            <template #operate="obj">
+              <div class="cell-operate">
+                <template v-if="$refs['table-m1'].isActiveByRow(obj.row)">
+                  <a @click="saveRowEvent(obj)" class="a-link">
+                    <el-tooltip :enterable="false" effect="dark" :content="$t1('保存')" placement="top"
+                                popper-class="tooltip-skin"><i class="el-icon-circle-check"></i></el-tooltip>
+                  </a>
+                  <a @click="cancleRowEvent(obj)" class="a-link" v-if="hasSaveRow(obj.row)">
+                    <el-tooltip :enterable="false" effect="dark" :content="$t1('取消行编辑')" placement="top"
+                                popper-class="tooltip-skin"><i class="el-icon-circle-close"></i></el-tooltip>
+                  </a>
+                  <a @click="removeRowEvent(obj)" class="a-link" v-if="!hasSaveRow(obj.row)">
+                    <el-tooltip :enterable="false" effect="dark" :content="$t1('删除')" placement="top"
+                                popper-class="tooltip-skin"><i class="el-icon-delete"></i></el-tooltip>
+                  </a>
+                </template>
+                <template v-else>
+                  <a class="a-link" @click="addMenu(obj)" v-if="obj.row && !obj.row.parent">
+                    <el-tooltip :enterable="false" effect="dark" :content="$t1('新增')" placement="top"
+                                popper-class="tooltip-skin"><i class="el-icon-circle-plus-outline"></i></el-tooltip>
+                  </a>
+                  <a @click="editRowEvent(obj)" class="a-link" v-if="obj.row">
+                    <el-tooltip :enterable="false" effect="dark" :content="$t1('行编辑')" placement="top"
+                                popper-class="tooltip-skin"><i class="el-icon-edit-outline"></i></el-tooltip>
+                  </a>
+                </template>
+              </div>
+            </template>
+          </vxe-grid>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import {tableTreeMixins} from '@base/mixins/tableTree/index.js';
+
+export default {
+  name: 'workbench_menu:list',
+  components: {},
+  mixins: [tableTreeMixins],
+  mounted() {
+    this.initTableList();
+  },
+  data() {
+    let that = this;
+    return {
+      activeName: 'second',
+      dataId: '',
+      formData: {},
+      vxeOption: {},
+      iconList: [
+        "icon-shangji-shangjiguanli",
+        "icon-daifahuodingdan",
+        "icon-jichuziliao",
+        "icon-zuzhi",
+        "icon-shujujianmo",
+        "icon-wenjianguanli",
+        "icon-guanli1",
+        "icon-dianshang",
+        "icon-ziyuan",
+        "icon-feiyongguanli",
+        "icon-yunpingtai",
+        "icon-yingxiao",
+        "icon-biaodanguanli",
+        "icon-baobiao",
+        "icon-yusuanguanli",
+        "icon-baoxiao",
+        "icon-yanfa",
+        "icon-hetong",
+        "icon-danjuliuchengshezhi",
+        "icon-shenqingguanli",
+        "icon-xitongshezhi",
+        "icon-icon-servicenetwork",
+        "icon-a-zu96",
+        "icon-chanpin2",
+        "icon-shangpin2",
+        "icon-tuihuanhuo1",
+        "icon-wenquantiaocha",
+        "icon-cangchu",
+        "icon-caigou",
+        "icon-churuku",
+        "icon-fl-gouwuche",
+        "icon-shangpinfenlei",
+        "icon-shangpinshangxiajia",
+        "icon-taocanxinxi_changgui",
+        "icon-kehuchaxun",
+        "icon-shangpin-canshumoban",
+        "icon-shangpinguanli-shangpinweihu",
+        "icon-kehubiangeng",
+        "icon-shanghuguanxiweihu",
+        "icon-kehuxinzeng",
+        "icon-dunpaibaowei",
+        "icon-a-061_bijiben",
+        "icon-a-061_gengduo",
+        "icon-a-061_gouwu-12",
+        "icon-a-061_jianzhu-17",
+        "icon-a-061_shuben",
+        "icon-a-061_jinbi",
+        "icon-a-061_guangbo",
+        "icon-a-061_shuqian",
+        "icon-a-061_shangpin",
+        "icon-a-061_kuaidi",
+        "icon-a-061_wenjian",
+        "icon-a-061_xiaoxi",
+        "icon-a-rongqi262",
+        "icon-a-rongqi256",
+        "icon-a-rongqi265",
+        "icon-a-rongqi285",
+        "icon-huomiao-mianxing",
+        "icon-dingwei-mianxing",
+        "icon-xiuxian-mianxing",
+        "icon-shuju-wenjianliebiao",
+        "icon-chexing-pinpailiebiao",
+        "icon-yonghu-gongzuodanwei",
+        "icon-shujujieguo",
+        "icon-gongyingshangguanli",
+        "icon-xitong-quanxianguanli",
+        "icon-shujuguanli",
+        "icon-yonghushenhe",
+        "icon-gongyingshangliebiao",
+        "icon-xiaoliangliebiao",
+        "icon-chexing-ruanjianbanben",
+        "icon-xitong-meijuguanli",
+        "icon-huiyuan-qiyeguanli",
+        "icon-chexing-ruanjianbanben1",
+        "icon-shuju-ceshiguihua",
+        "icon-yonghuliebiao",
+        "icon-yonghuguanli",
+        "icon-xitong-jiaoseguanli",
+        "icon-chexingliebiao",
+        "icon-chexingguanli",
+        "icon-shujujiegou",
+        "icon-huiyuanyonghu",
+        "icon-huiyuan-quanxianguanli",
+        "icon-shexiangtouqiehuan",
+        "icon-luyin",
+        "icon-yingpianjiesuo",
+        "icon-yingpianjiasuo",
+        "icon-qianlu",
+        "icon-luxiangjiasuo",
+        "icon-a-yonghuliebiao3x",
+        "icon-a-yijianfankui3x",
+        "icon-a-chanpinshangjiaguanli3x",
+        "icon-a-kefufankui3x",
+        "icon-a-zhanghaoguanli3x",
+        "icon-a-kefu3x",
+        "icon-a-kesu3x",
+        "icon-a-ribaobiaoshuju3x",
+        "icon-a-tuikuan3x",
+        "icon-gudingmianzhi",
+        "icon-manjianquan",
+        "icon-xiangouhuodong",
+        "icon-youhuiquan",
+        "icon-Xyuanhuodong",
+        "icon-shangpindongcha",
+        "icon-zhijianghuodong",
+        "icon-shizhongshezhi",
+        "icon-kasuceshi",
+        "icon-SDkarongliang",
+        "icon-sudubuchang",
+        "icon-sududanwei",
+        "icon-GPSxinxi",
+        "icon-GPSxianshi",
+        "icon-GPSshuiyin",
+        "icon-a-shouhui3x",
+        "icon-a-yunyingpeizhi3x",
+        "icon-biaotitubiao",
+        "icon-tubiao1",
+        "icon-tubiao18",
+        "icon-tubiao28",
+        "icon-tiyugonggongsheshi",
+        "icon-tubiaoliebiao",
+        "icon-VRtubiao",
+        "icon-tubiaoAzitubiao",
+        "icon-tubiao2",
+        "icon-tubiao-",
+        "icon-tubiao-1",
+        "icon-tubiao-2",
+        "icon-tubiao-3",
+        "icon-tubiao3",
+        "icon-a-tubiao-daqijiayou",
+        "icon-charge-fill",
+        "icon-book-fill",
+        "icon-device-set-fill",
+        "icon-dynamic-password-fill",
+        "icon-map-fill",
+        "icon-security-fill",
+        "icon-tool-fill",
+        "icon-readcard-fill",
+        "icon-chaye",
+        "icon-baoxian",
+        "icon-dadou",
+        "icon-nongye",
+        "icon-nongyeqixiang",
+        "icon-pingguo",
+        "icon-nongyebaoxian",
+        "icon-yaogan",
+        "icon-zhiwu",
+        "icon-weixing",
+        "icon-qixiang",
+        "icon-zuowu",
+        "icon-qiyeguanli-2",
+        "icon-qiyeshenhe-2",
+        "icon-xiaoxi",
+        "icon-xunhuan",
+        "icon-zoushi",
+        "icon-bushu",
+        "icon-duanlian",
+        "icon-gaojing",
+        "icon-renyuan",
+        "icon-tubiao4",
+        "icon-wangguan",
+        "icon-wangluo",
+        "icon-fenzhi",
+        "icon-gongchang",
+        "icon-zhihuizhongxin",
+        "icon-mti-an-gongmaoqiye",
+        "icon-mti-an-zhongdaweixianyuan",
+        "icon-mti-cheng-huanjing",
+        "icon-mti-cheng-lvhua",
+        "icon-mti-di-dimianchenjiang",
+        "icon-mti-cheng-fengli",
+        "icon-mti-di-qiangzhentai",
+        "icon-mti-dong-yinhuan",
+        "icon-mti-dong-jiaotongshigu",
+        "icon-mti-dong-jianzhugongdi",
+        "icon-mti-fang-jiangyuliang",
+        "icon-mti-dong-weihuapin",
+        "icon-mti-gu-shengtaihuanjing",
+        "icon-mti-ying-daochang",
+        "icon-mti-sen-shumuziyuanfenbu",
+        "icon-mti-gongdi",
+        "icon-mti-ying-moshiqiehuan",
+        "icon-mti-ying-tongxunbaozhang",
+        "icon-mti-ying-qidongyuan",
+        "icon-mti-ying-jishuidian",
+        "icon-mti-ying-zaihoufupan",
+        "icon-wodeshequ2",
+        "icon-service-line-1",
+        "icon-notice-manage-fill",
+        "icon-announcement-fill",
+        "icon-box-noise-fill",
+        'icon-zhengjiquanxianx',
+        'icon-gongshi',
+        'icon-gongshi1',
+        'icon-shouye-yanfaguanli',
+        'icon-yanfaguanli-rizhiguanli',
+        'icon-yanfaguanli-xiangmuguanli',
+        'icon-yanfaguanli-wendingxing',
+        'icon-yanfaguanli-xuqiuguanli',
+        'icon-zhengjibeijian',
+        'icon-zhengjishiyan',
+        'icon-yanfafeiyong',
+        'icon-yusuanjisuan',
+        'icon-feiyongtongji',
+        'icon-gongshiguanli'
+      ],
+    };
+  },
+  methods: {
+    searchEvent() {
+      this.$refs['table-m1'].commitProxy('reload');
+    },
+    resetEvent() {
+      this.formData = {};
+      this.$refs['table-m1'].commitProxy('reload');
+    },
+    initTableList() {
+      let that = this;
+      let tableOption = {
+        vue: this,
+        tableRef: 'table-m1',
+        tableName: 'user_workbench_menu_list-m1',
+        path: USER_PREFIX + '/workbench_menu/list',
+        treeNodeUrl: USER_PREFIX + '/workbench_menu/listChildren',
+        editSaveUrl: USER_PREFIX + '/workbench_menu/save',
+        editDefaultRow: () => {
+          return {enabled: true};
+        },
+        param: () => {
+          return this.formData;
+        },
+        treeNodeParam: row => {
+          return {
+            parent: row.id,
+            enabled: this.formData.enabled
+          };
+        },
+        config: {
+          treeConfig: {
+            parentField: 'parent'
+          },
+          scrollX:{
+            enabled: false
+          }
+        },
+        columns: [
+          {type: 'checkbox', width: 48, resizable: false, fixed: 'left'},
+          {
+            title: this.$t1('菜单名称'),
+            field: 'menuName',
+            width: 250,
+            fixed: 'left',
+            treeNode: true,
+            editRender: {name: 'input'},
+            slots: {
+              default: ({row}) => {
+                return [
+                  <a
+                    class="levitate-tips"
+                    onclick={event => {
+                      event.stopPropagation();
+                      this.$refs['table-m1'].toggleTreeExpand(row);
+                    }}
+                  >
+                    {row.menuName}
+                  </a>
+                ];
+              }
+            }
+          },
+          {
+            field: 'menuCode',
+            title: this.$t1('菜单编码'),
+            width: 250,
+            editRender: {},
+            slots: {
+              edit: ({row}) => {
+                return [<el-input v-model={row.menuCode}/>];
+              }
+            }
+          },
+          {
+            field: 'enabled',
+            title: this.$t1('是否启用'),
+            width: 150,
+            editRender: {
+              name: '$select',
+              events: {
+                change: () => {
+                  this.$forceUpdate();
+                }
+              },
+              options: [
+                {
+                  label: this.$t1('启用'),
+                  value: true
+                },
+                {
+                  label: this.$t1('禁用'),
+                  value: false
+                }
+              ]
+            },
+            slots: {
+              default: ({row}) => {
+                if (row.enabled) {
+                  return [<div class="txt-status">{this.$t1('启用')}</div>];
+                } else {
+                  return [<div class="txt-status s-3">{this.$t1('禁用')}</div>];
+                }
+              }
+            }
+          },
+          {field: 'orders', title: this.$t1('序号'), width: 100,
+            editRender: {},
+            slots: {
+              edit: ({row}) => {
+                if(row.orders===null)row.orders = undefined;
+                return [<base-input-number v-model={row.orders}/>];
+              }
+            }},
+          {
+            field: 'menuImg',
+            title: this.$t1('图标'),
+            width: 150,
+            editRender: {},
+            slots: {
+              default: ({row}) => {
+                return [
+                  <i class={"iconfont " + row.menuImg}></i>
+                ];
+              },
+              edit: "menuImgEdit"
+            }
+          },
+          {
+            field: 'menuImgColor',
+            title: this.$t1('图标颜色'),
+            width: 150,
+            editRender: {},
+            slots: {
+              default: ({row}) => {
+                if(!!row.menuImgColor){
+                    return [<el-color-picker class="menu-color" v-model={row.menuImgColor} disabled={true} />];
+                }
+              },
+              edit: ({row}) => {
+                return [<el-color-picker v-model={row.menuImgColor}/>];
+              }
+            }
+          },
+          {
+            field: 'note',
+            title: this.$t1('说明'),
+            width: 350,
+            editRender: {},
+            slots: {
+              edit: ({row}) => {
+                return [<el-input v-model={row.note}/>];
+              }
+            }
+          },
+          {title: this.$t1('创建时间'), field: 'createDate', width: 150},
+          {title: this.$t1('更新时间'), field: 'modifyDate', width: 150},
+          {
+            width: 100,
+            title: '',
+            fixed: 'right',
+            sortable: false,
+            slots: {default: 'operate'}
+          }
+        ]
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+        this.vxeOption = opts;
+      });
+    },
+    addMenu(parentParam) {
+      if (parentParam) {
+        this.insertChildEvent(parentParam);
+      } else {
+        this.insertTopRow(this.$refs['table-m1']);
+      }
+    },
+    checkMenuImg(row, menuImg, rowIndex) {
+      row.menuImg = menuImg;
+      this.$refs['menuImg' + rowIndex].showPopper = false;
+    },
+    clearMenuImg(row) {
+      row.menuImg = null;
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.el-select-dropdown__item .iconfont {
+  vertical-align: middle;
+  margin-right: 3px;
+}
+
+.icons-box_select {
+  .el-icon-circle-close {
+    display: none;
+  }
+}
+
+.icons-box_select.noNone:hover {
+  .el-icon-arrow-down {
+    display: none;
+  }
+
+  .el-icon-circle-close {
+    display: inline-block;
+  }
+}
+::v-deep .menu-color .el-color-picker__mask{
+  background-color: unset;
+  cursor: default;
+}
+::v-deep .menu-color .el-color-picker__trigger {
+    cursor: default;
+}
+::v-deep .menu-color .el-icon-arrow-down{
+  display: none;
+}
+
+::v-deep .el-color-picker--medium {
+    height: 26px;
+}
+::v-deep .el-color-picker--medium .el-color-picker__trigger {
+    height: 26px;
+    width: 26px;
+}
+::v-deep .el-color-picker--medium .el-color-picker__mask {
+    height: 24px;
+    width: 24px;
+}
+</style>