add.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <el-card shadow="never" style="border: 0;">
  3. <yun-form
  4. :token="true"
  5. :data="data"
  6. ref="yunform"
  7. :columns="eidtColumns">
  8. <template #default>
  9. {:token_field()}
  10. </template>
  11. <template #pid="{rows}">
  12. <el-form-item label="{:__('父级')}:" required>
  13. <el-tree-select
  14. placeholder="{:__('请选择父级')}"
  15. v-model="rows.pid"
  16. :data="ruledata"
  17. check-strictly
  18. :default-expand-all="true"
  19. :props='{label:"title",children:"childlist",value:"id"}'
  20. >
  21. </el-tree-select>
  22. </el-form-item>
  23. </template>
  24. <template #icon="{rows}">
  25. <el-form-item label="{:__('菜单图标')}:" prop="icon" v-if="rows.ismenu=='1'">
  26. <el-input v-model="rows.icon">
  27. <template #prepend><i :class="rows.icon"></i></template>
  28. <template #append>
  29. <el-button size="small" @click="openIconPanel">{:__('选择图标')}</el-button>
  30. </template>
  31. </el-input>
  32. </el-form-item>
  33. </template>
  34. </yun-form>
  35. </el-card>
  36. <check-icon ref="checkicon" @selected="selectIcon"></check-icon>
  37. </template>
  38. <script>
  39. import form from "@components/Form.js";
  40. import checkicon from "@components/CheckIcon.js";
  41. import {TreeIdtoString} from "@util.js";
  42. function parseActions(row){
  43. if(parseInt(row.ismenu)===1){
  44. return row;
  45. }
  46. let action=JSON.parse(row.action);
  47. let title=JSON.parse(row.title);
  48. let actions={};
  49. for(let key in action){
  50. actions[action[key]]=title[key];
  51. }
  52. row.actions=actions;
  53. return row;
  54. }
  55. export default{
  56. components:{'YunForm':form,'CheckIcon':checkicon},
  57. data:{
  58. ruledata:TreeIdtoString(Yunqi.data.ruledata),
  59. data:Yunqi.data.row?parseActions(Yunqi.data.row):{},
  60. eidtColumns:[
  61. {field: 'id',edit:'hidden'},
  62. {field: 'ismenu',title: __('菜单'),edit: {form:'radio',value:'1'},searchList: {'1':__('是'),'0':__('否')}},
  63. {field: 'pid',title: __('父级'),edit:'slot',rules:'required'},
  64. {field: 'title', title: __('名称'),visible:function(row){return row.ismenu=='1'},edit:'text'},
  65. {field: 'controller', title: __('控制器'),edit:'text'},
  66. {field: 'action', title: __('方法'),edit:'text',visible:function(row){
  67. return row.ismenu=='1';
  68. }},
  69. {
  70. field: 'actions',
  71. title: __('方法'),
  72. edit: {
  73. form:'fieldlist',
  74. label:[__('方法名'),__('功能描述')],
  75. value:{index:__('查看'),add:__('添加'),edit:__('编辑'),multi:__('更新'),del:__('删除'),import:__('导入'),download:__('下载'),recyclebin:__('回收站')}
  76. },
  77. visible:function(row){
  78. return row.ismenu=='0';
  79. },
  80. },
  81. {field: 'menutype', title: __('类型'),visible:function(row){return row.ismenu=='1'},edit:{form:'radio',value:'tab'},searchList: Yunqi.data.menutypeList},
  82. {field: 'icon', title: __('图标'),edit: {form:'slot',value: 'fa fa-th-large'}},
  83. {field: 'extend', title: __('扩展属性'),visible:function(row){return row.ismenu=='1'},edit: {form:'input',type:'textarea',placeholder:'请输入菜单的扩展属性,格式为json'}},
  84. {field: 'weigh', title: __('权重'),visible:function(row){return row.ismenu=='1'},edit:(Yunqi.config.action=='edit')?'number':false},
  85. {field: 'status', title: __('状态'),visible:function(row){return row.ismenu=='1'},edit: {form:'radio',value:'normal'},searchList: {'normal': __('正常'),'hidden': __('隐藏')}}
  86. ],
  87. pageinit:false
  88. },
  89. methods: {
  90. openIconPanel:function (){
  91. this.$refs.checkicon.open();
  92. },
  93. selectIcon:function (i){
  94. this.$refs.yunform.form_.data.icon=i;
  95. }
  96. }
  97. }
  98. </script>
  99. <style>
  100. </style>