Startsida Utforska Hjälp
Registrera dig Logga in
test
/
zyedu
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Gren: master
Grenar Taggar
zyedu
/
application
/
admin
/
view
/
widget
/
images2.php

images2.php 32 KB
Permalänk Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636 
  1. <!DOCTYPE html>
    2. 

  2. <!--suppress JSAnnotator -->
    3. 

  3. <html lang="zh-CN">
    4. 

  4. <head>
    5. 

  5.     <link rel="stylesheet" href="{__PLUG_PATH}layui/css/layui.css">
    6. 

  6.     <link rel="stylesheet" href="{__ADMIN_PATH}css/images.css">
    7. 

  7.     <script src="{__PLUG_PATH}jquery-1.10.2.min.js"></script>
    8. 

  8.     <script src="{__PLUG_PATH}layui/layui.all.js"></script>
    9. 

  9.     <script src="{__PLUG_PATH}vue/dist/vue.min.js"></script>
    10. 

  10. </head>
    11. 

  11. <style>
    12. 

  12.     /* .layui-hide {
    13. 

  13.         display: none !important;
    14. 

  14.     }
    15. 

  15.     .layui-input-box {
    16. 

  16.         padding: 10px;
    17. 

  17.     }
    18. 

  18.     .layui-input-box .layui-input {
    19. 

  19.         padding: 0 10px;
    20. 

  20.     }
    21. 

  21.     .layui-btn-box {
    22. 

  22.         padding: 14px 10px;
    23. 

  23.     }
    24. 

  24.     .layui-tree {
    25. 

  25.         max-height: 447px;
    26. 

  26.         overflow: auto;
    27. 

  27.     }
    28. 

  28.     .layui-fluid {
    29. 

  29.         padding: 0;
    30. 

  30.     } */
    31. 

  31.     [v-cloak] {
    32. 

  32.         display: none;
    33. 

  33.     }
    34. 

  34. </style>
    35. 

  35. <body>
    36. 

  36. 

  37. <div v-cloak class="layui-fluid" id="app">
    38. 

  38.     <!-- <div class="picture-library"> -->
    39. 

  39.         <div class="library-left">
    40. 

  40.             <div class="layui-input-box">
    41. 

  41.             <input type="text" class="layui-input">
    42. 

  42.             </div>
    43. 

  43.             <div class="layui-tree" lay-filter="LAY-tree-8">
    44. 

  44.                 <div v-for="(item1, index1) in categoryList" :key="item1.id" :class="{ 'layui-tree-spread': item1.isOpen }" data-id="2" class="layui-tree-set layui-tree-setHide">
    45. 

  45.                     <div class="layui-tree-entry">
    46. 

  46.                         <div class="layui-tree-main" @click="OpenTree(item1, index1)">
    47. 

  47.                             <span class="layui-tree-iconClick">
    48. 

  48.                                 <i :style="{ visibility: item1.child.length ? 'visible' : 'hidden' }" :class="['layui-icon', item1.isOpen ? 'layui-icon-triangle-d' : 'layui-icon-triangle-r']"></i>
    49. 

  49.                             </span>
    50. 

  50.                             <span class="layui-tree-txt">{{ item1.name }}</span>
    51. 

  51.                         </div>
    52. 

  52.                         <div class="layui-btn-group layui-tree-btnGroup">
    53. 

  53.                             <i class="layui-icon layui-icon-add-1" data-type="add"></i>
    54. 

  54.                             <i class="layui-icon layui-icon-edit" data-type="update" @click="updateCategory(item1)"></i>
    55. 

  55.                             <i class="layui-icon layui-icon-delete" data-type="del"></i>
    56. 

  56.                         </div>
    57. 

  57.                     </div>
    58. 

  58.                     <div :style="{ display: item1.isOpen ? 'block' : 'none' }" class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine">
    59. 

  59.                         <div v-for="(item2, index2) in item1.child" :key="item2.id" data-id="2000" class="layui-tree-set">
    60. 

  60.                             <div class="layui-tree-entry">
    61. 

  61.                                 <div class="layui-tree-main" @click="OpenTree(item2, index2)">
    62. 

  62.                                     <span class="layui-tree-iconClick">
    63. 

  63.                                         <i class="layui-tree-iconArrow layui-hide"></i>
    64. 

  64.                                     </span>
    65. 

  65.                                     <span class="layui-tree-txt">{{ item2.name }}</span>
    66. 

  66.                                 </div>
    67. 

  67.                                 <div class="layui-btn-group layui-tree-btnGroup">
    68. 

  68.                                     <i class="layui-icon layui-icon-edit" data-type="update"></i>
    69. 

  69.                                     <i class="layui-icon layui-icon-delete" data-type="del"></i>
    70. 

  70.                                 </div>
    71. 

  71.                             </div>
    72. 

  72.                         </div>
    73. 

  73.                     </div>
    74. 

  74.                 </div>
    75. 

  75.             </div>
    76. 

  76.         </div>
    77. 

  77.         <div class="library-right">
    78. 

  78.             <div class="btn-box">
    79. 

  79.                 <button type="button" class="layui-btn layui-btn-sm">使用选中图片</button>
    80. 

  80.                 <button type="button" class="layui-btn layui-btn-sm">添加分类</button>
    81. 

  81.                 <button type="button" class="layui-btn layui-btn-sm">上传图片</button>
    82. 

  82.                 <button type="button" class="layui-btn layui-btn-sm">删除图片</button>
    83. 

  83.             </div>
    84. 

  84.             <div class="content-box">
    85. 

  85.                 <!-- <div class="picture-list">
    86. 

  86.                     <div v-for="(item,index) in imageList" class="picture-item">
    87. 

  87.                         <div>
    88. 

  88.                             <img src="" alt="">
    89. 

  89.                         </div>
    90. 

  90.                         <div>
    91. 

  91.                             <input type="text">
    92. 

  92.                             <i class="layui-icon layui-icon-edit"></i>
    93. 

  93.                         </div>
    94. 

  94.                     </div>
    95. 

  95.                 </div> -->
    96. 

  96.                 <ul>
    97. 

  97.                     <li v-for="(item, index) in imageList">
    98. 

  98.                         <div class="img-box on">
    99. 

  99.                             
    100. 

  100.                             <img :src="item.att_dir" alt="">
    101. 

  101.                         </div>
    102. 

  102.                         <div class="title-box">
    103. 

  103.                             <input type="text">
    104. 

  104.                             <i class="layui-icon layui-icon-edit"></i>
    105. 

  105.                         </div>
    106. 

  106.                     </li>
    107. 

  107.                 </ul>
    108. 

  108.             </div>
    109. 

  109.             <div style="height:55px;"></div>
    110. 

  110.         </div>
    111. 

  111.             <!-- <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3"> -->
    112. 

  112.                 <!-- <div class="layui-card"> -->
    113. 

  113.                     <!-- <div class="layui-card-header">
    114. 

  114.                         <div class="layui-unselect layui-form-select layui-form-selected">
    115. 

  115.                             <div class="layui-select-title">
    116. 

  116.                                 <input type="text" name="title" v-model="searchTitle" placeholder="搜索分类"
    117. 

  117.                                        style="height: 24px;line-height:24px;padding-left:7px;font-size: 12px;display: inline;padding-right: 0;width: 100%;"
    118. 

  118.                                        autocomplete="off" class="layui-input layui-input-search" @keydown="search">
    119. 

  119.                                                                <i class="layui-icon layui-icon-search" @click="search"  style="cursor: pointer;margin:0 3px;"></i>
    120. 

  120.                             </div>
    121. 

  121.                         </div>
    122. 

  122.                     </div> -->
    123. 

  123.                     <!-- <div class="layui-card-body" style="padding: 0;height: 100%;overflow:auto;"> -->
    124. 

  124.                                                <!-- <div class="layadmin-homepage-pad-ver">
    125. 

  125.                                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" style="width: 80%" @click="addCategory">添加</button>
    126. 

  126.                                                </div> -->
    127. 

  127.                         <!-- <div ref="tree" class="demo-tree demo-tree-box"> -->
    128. 

  128.                             <!-- <div class="layui-tree layui-tree-line">
    129. 

  129.                                 <div class="layui-tree-set layui-tree-setHide">
    130. 

  130.                                     <div class="layui-tree-entry">
    131. 

  131.                                         <div class="layui-tree-main" @click="OpenTree({child:[],id:0})">
    132. 

  132.                                             <span class="layui-tree-iconClick">
    133. 

  133.                                                 <i class="layui-tree-iconArrow"></i>
    134. 

  134.                                             </span>
    135. 

  135.                                             <span class="layui-tree-txt" :class="pid == 0 ? 'on' : '' ">全部图片</span>
    136. 

  136.                                         </div>
    137. 

  137.                                     </div>
    138. 

  138.                                 </div>
    139. 

  139.                                 <div v-for="(value, k) in categoryList" :class="{ 'layui-tree-spread': value.isOpen }" class="layui-tree-set layui-tree-setHide">
    140. 

  140.                                     <div class="layui-tree-entry" @mouseover.stop="changeActive(value,k)" @mouseout.stop="removeActive(value,k)">
    141. 

  141.                                         <div class="layui-tree-main" @click="OpenTree(value,k)">
    142. 

  142.                                             <span class="layui-tree-iconClick">
    143. 

  143.                                                 <i class="layui-icon layui-icon-triangle-d" v-if="value.child.length && value.isOpen"></i>
    144. 

  144.                                                 <i class="layui-icon layui-icon-triangle-r" v-else-if="value.child.length && !value.isOpen"></i>
    145. 

  145.                                                 <i class="layui-icon " v-else>&nbsp;&nbsp;&nbsp;</i>
    146. 

  146.                                             </span>
    147. 

  147.                                             <span class="layui-tree-txt line1" :class="pid == value.id ? 'on': '' " v-text="value.name"></span>
    148. 

  148.                                         </div>
    149. 

  149.                                         <div class="layui-btn-group layui-tree-btnGroup layui-layer layui-layer-tips"
    150. 

  150.                                              v-show="value.isShow">
    151. 

  151.                                             <div>
    152. 

  152.                                                 <i class="layui-icon layui-icon-add-1" @click.stop="addCategory(value)"
    153. 

  153.                                                    title="添加"></i>
    154. 

  154.                                                 <i class="layui-icon layui-icon-edit"
    155. 

  155.                                                    @click.stop="updateCategory(value)" title="编辑"></i>
    156. 

  156.                                                 <i class="layui-icon layui-icon-delete" v-if="!value.child.length"
    157. 

  157.                                                    title="删除" @click.stop="delCategory(value)"></i>
    158. 

  158.                                             </div>
    159. 

  159.                                             <i class="layui-layer-TipsG layui-layer-TipsT"></i>
    160. 

  160.                                         </div>
    161. 

  161.                                     </div>
    162. 

  162.                                     <div class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
    163. 

  163.                                          v-show="value.isOpen" style="display: block">
    164. 

  164.                                         <div class="layui-tree-set" v-for="(item,key) in value.child">
    165. 

  165.                                             <div class="layui-tree-entry">
    166. 

  166.                                                 <div class="layui-tree-main" @click="OpenTree(item,key)">
    167. 

  167.                                                     <span class="layui-tree-iconClick">
    168. 

  168.                                                         <i class="layui-icon"></i>
    169. 

  169.                                                     </span>
    170. 

  170.                                                     <span class="layui-tree-txt line1"
    171. 

  171.                                                           :class="pid == item.id ? 'on': '' " v-text="item.name"></span>
    172. 

  172.                                                 </div>
    173. 

  173.                                                 <div class="layui-btn-group layui-tree-btnGroup layui-layer layui-layer-tips"
    174. 

  174.                                                      @mouseover.stop="changeActive(item,k,key)"
    175. 

  175.                                                      @mouseout.stop="removeActive(item,k,key)">
    176. 

  176.                                                     <div>
    177. 

  177.                                                         <i class="layui-icon layui-icon-edit"
    178. 

  178.                                                            @click.stop="updateCategory(item,value.pid)" title="编辑"></i>
    179. 

  179.                                                         <i class="layui-icon layui-icon-delete"
    180. 

  180.                                                            @click.stop="delCategory(item,value.pid)" title="删除"></i>
    181. 

  181.                                                     </div>
    182. 

  182.                                                     <i class="layui-layer-TipsG layui-layer-TipsT"></i>
    183. 

  183.                                                 </div>
    184. 

  184.                                             </div>
    185. 

  185.                                         </div>
    186. 

  186.                                     </div>
    187. 

  187.                                 </div>
    188. 

  188.                             </div> -->
    189. 

  189.                         <!-- </div> -->
    190. 

  190.                     <!-- </div> -->
    191. 

  191.                 <!-- </div> -->
    192. 

  192.             <!-- </div> -->
    193. 

  193.         <!-- <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 layui-col-lg9">
    194. 

  194.             <div class="layadmin-homepage-panel layadmin-homepage-shadow">
    195. 

  195.                 <div class="layui-card text-center">
    196. 

  196.                     <div class="layui-card-header">
    197. 

  197.                         <div class="layadmin-homepage-pad-ver" style="text-align: left">
    198. 

  198.                             <div class="layui-btn-group">
    199. 

  199.                             <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
    200. 

  200.                                         :class="selectImages.length ? '':'layui-btn-disabled' " @click="useImages">
    201. 

  201.                                     使用选中的图片
    202. 

  202.                                 </button>
    203. 

  203.                                 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
    204. 

  204.                                         @click="addCategory">添加分类
    205. 

  205.                                 </button>
    206. 

  206.                                 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" ref="upload">
    207. 

  207.                                     上传图片
    208. 

  208.                                 </button>
    209. 

  209.                                 <button type="button" class="layui-btn layui-btn-warm layui-btn-sm"
    210. 

  210.                                         :class="selectImages.length ? '':'layui-btn-disabled' " @click="moveCate">移动分类
    211. 

  211.                                 </button>
    212. 

  212.                                 <div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd><dd lay-value="0" class="">北京</dd><dd lay-value="1" class="">上海</dd><dd lay-value="2" class="">广州</dd><dd lay-value="3" class="">深圳</dd><dd lay-value="4" class="">杭州</dd></dl></div>
    213. 

  213.                                 <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
    214. 

  214.                                         :class="selectImages.length ? '':'layui-btn-disabled' " @click="delImage">删除图片
    215. 

  215.                                 </button>
    216. 

  216.                                 <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="onSearch">
    217. 

  217.                                     <i class="layui-icon layui-icon-search"></i>
    218. 

  218.                                 </button>
    219. 

  219.                             </div>
    220. 

  220.                         </div>
    221. 

  221.                     </div>
    222. 

  222.                     <div class="layui-card-body clearfix image-box" style="padding: 10px;height: 360px;z-index:10;">
    223. 

  223.                         <div class="layui-col-md2 layui-col-xs2 layui-col-sm2 image" v-for="(item,index) in imageList">
    224. 

  224.                             <span class="layui-badge layui-bg-cyan" style="position: absolute;" v-if="item.sort">{{ item.sort }}</span>
    225. 

  225.                             <div class="layui-img-box" :class="item.isSelect ? 'on': '' ">
    226. 

  226. 

  227.                                 <img :src="item.att_dir" v-if="small == 1" @click="changImage(item)">
    228. 

  228.                                 <img :src="item.att_dir" v-else @click="changImage(item)">
    229. 

  229.                             </div>
    230. 

  230.                             <div class="picture-title" @mouseover="onMouseover(item)" @mouseout="onMouseout(item)"><input v-model="item.title" :readonly="item.readonly" @blur="onBlur(item)"><i v-show="item.isEdit" class="layui-icon layui-icon-edit" @click="onEdit($event, item)"></i></div>
    231. 

  231.                         </div>
    232. 

  232.                         <div class="empty-image" style="width: 100%;height: 100%;text-align: center;"
    233. 

  233.                              v-if="!imageList.length && loading == false">
    234. 

  234.                             <div class="layui-img-box">
    235. 

  235.                                 <img src="{__ADMIN_PATH}images/empty.jpg" style="height: 400px;" alt="">
    236. 

  236.                             </div>
    237. 

  237.                         </div>
    238. 

  238.                     </div>
    239. 

  239.                     <div class="layui-card-body clearfix page">
    240. 

  240.                         <div class="layui-col-md8 layui-col-xs8 layui-col-sm8 image_page" ref="image_page"></div>
    241. 

  241.                     </div>
    242. 

  242.                 </div>
    243. 

  243.             </div>
    244. 

  244.         </div> -->
    245. 

  245.     <!-- </div> -->
    246. 

  246. </div>
    247. 

  247. </body>
    248. 

  248. </html>
    249. 

  249. <script src="{__ADMIN_PATH}js/layuiList.js?id=dsfwef"></script>
    250. 

  250. <script>
    251. 

  251.     var pid = {$pid}, small = {$Request.param.small ? : 0
    252. 

  252.     } ,
    253. 

  253.     parentinputname = '{$fodder}', maxLength = {$maxLength};//当前图片分类ID
    254. 

  254. 

  255.     new Vue({
    256. 

  256.         el: "#app",
    257. 

  257.         data: {
    258. 

  258.             categoryList: [],
    259. 

  259.             searchTitle: '',
    260. 

  260.             pid: pid,
    261. 

  261.             imageList: [],
    262. 

  262.             page: 1,
    263. 

  263.             limit: 18,
    264. 

  264.             loading: false,
    265. 

  265.             small: small,
    266. 

  266.             selectImages: [],
    267. 

  267.             selectImagesIDS: [],
    268. 

  268.             uploadInst: null,
    269. 

  269.             searchImage: ''
    270. 

  270.         },
    271. 

  271.         watch: {
    272. 

  272.             page: function () {
    273. 

  273.                 this.getImageList();
    274. 

  274.             },
    275. 

  275.         },
    276. 

  276.         methods: {
    277. 

  277.             onSearch: function () {
    278. 

  278.                 var vm = this;
    279. 

  279.                 layer.prompt({
    280. 

  280.                     title: '输入图片名称，并确认',
    281. 

  281.                     formType: 0
    282. 

  282.                 }, function (text, index) {
    283. 

  283.                     if (!text.trim().length) {
    284. 

  284.                         return;
    285. 

  285.                     }
    286. 

  286.                     this.pid = 0;
    287. 

  287.                     this.searchImage = text.trim();
    288. 

  288.                     this.page = 1;
    289. 

  289.                     layer.close(index);
    290. 

  290.                     var load = layer.load(1);
    291. 

  291.                     layList.baseGet(this.U({
    292. 

  292.                         a: 'get_image_list',
    293. 

  293.                         q: {pid: this.pid, page: this.page, limit: this.limit, title: this.searchImage}
    294. 

  294.                     }), function (res) {
    295. 

  295.                         layer.close(load);
    296. 

  296.                         var list = res.data.list;
    297. 

  297.                         list.forEach(function (item) {
    298. 

  298.                             item.readonly = true;
    299. 

  299.                             item.isEdit = false;
    300. 

  300.                             if (!item.title) {
    301. 

  301.                                 item.title = item.name.slice(0, item.name.lastIndexOf('.'));
    302. 

  302.                             }
    303. 

  303.                         });
    304. 

  304.                         this.$set(this, 'imageList', list);
    305. 

  305.                         if (this.page == 1) {
    306. 

  306.                             layList.laypage.render({
    307. 

  307.                                 elem: this.$refs.image_page
    308. 

  308.                                 , count: res.data.count
    309. 

  309.                                 , limit: this.limit
    310. 

  310.                                 , theme: '#191C6E',
    311. 

  311.                                 groups: 3,
    312. 

  312.                                 jump: function (obj) {
    313. 

  313.                                     vm.page = obj.curr;
    314. 

  314.                                 }
    315. 

  315.                             });
    316. 

  316.                         }
    317. 

  317.                     }.bind(this), function (res) {
    318. 

  318.                         layer.close(load);
    319. 

  319.                         layList.msg(res.msg);
    320. 

  320.                     });
    321. 

  321.                 }.bind(this));
    322. 

  322.             },
    323. 

  323.             onEdit: function (event, item) {
    324. 

  324.                 item.readonly = false;
    325. 

  325.                 this.titleFocus = item.title;
    326. 

  326.                 this.$nextTick(function () {
    327. 

  327.                     event.target.previousElementSibling.focus();
    328. 

  328.                 });
    329. 

  329.             },
    330. 

  330.             onBlur: function (item) {
    331. 

  331.                 item.readonly = true;
    332. 

  332.                 if (item.title === this.titleFocus) {
    333. 

  333.                     return;
    334. 

  334.                 }
    335. 

  335.                 layList.basePost(this.U({
    336. 

  336.                     a: 'updateImageTitle'
    337. 

  337.                 }), {
    338. 

  338.                     att_id: item.att_id,
    339. 

  339.                     title: item.title
    340. 

  340.                 }, function (res) {
    341. 

  341.                     layList.msg(res.msg);
    342. 

  342.                 }, function (res) {
    343. 

  343.                     layList.msg(res.msg);
    344. 

  344.                 });
    345. 

  345.             },
    346. 

  346.             onMouseover: function (item) {
    347. 

  347.                 item.isEdit = true;
    348. 

  348.             },
    349. 

  349.             onMouseout: function (item) {
    350. 

  350.                 item.isEdit = false;
    351. 

  351.             },
    352. 

  352.             //删除图片
    353. 

  353.             delImage: function () {
    354. 

  354.                 var that = this;
    355. 

  355.                 if (!this.selectImages.length) return;
    356. 

  356.                 layList.layer.confirm('是否要删除选中图片？', {
    357. 

  357.                     btn: ['是的我要删除', '我想想把'] //按钮
    358. 

  358.                 }, function () {
    359. 

  359.                     layList.basePost(that.U({a: 'delete'}), {imageid: that.selectImagesIDS}, function (res) {
    360. 

  360.                         layList.msg(res.msg);
    361. 

  361.                         that.getImageList();
    362. 

  362.                         window.location.reload()
    363. 

  363.                     }, function (res) {
    364. 

  364.                         layList.msg(res.msg);
    365. 

  365.                     })
    366. 

  366.                 })
    367. 

  367.             },
    368. 

  368.             //移动图片分类
    369. 

  369.             moveCate: function () {
    370. 

  370.                 if (!this.selectImages.length) return;
    371. 

  371.                 return this.getOpenWindow('移动图片', this.U({a: 'moveimg'}) + '?imgaes=' + this.selectImagesIDS);
    372. 

  372.             },
    373. 

  373.             //使用选中图片
    374. 

  374.             useImages: function () {
    375. 

  375.                 if (!this.selectImages.length) return;
    376. 

  376.                 //判断表单限制图片个数
    377. 

  377.                 if (typeof parent.$f != 'undefined') {
    378. 

  378.                     //已有图片个数
    379. 

  379.                     var nowpics = parent.$f.getValue(parentinputname).length,
    380. 

  380.                         props = parent.$f.model()[parentinputname].props || {},
    381. 

  381.                         maxlength = props.maxLength || 0;
    382. 

  382.                     //已选图片个数
    383. 

  383.                     var selectlength = this.selectImages.length;
    384. 

  384.                     //还可以选择多少张
    385. 

  385.                     var surplus = maxlength - nowpics;
    386. 

  386.                     if (nowpics + selectlength > maxlength) {
    387. 

  387.                         return layList.msg('最多只能选择 ' + surplus + ' 张');
    388. 

  388.                     }
    389. 

  389.                 }
    390. 

  390.                 //编辑器中
    391. 

  391.                 if (parentinputname.includes('editor')) {
    392. 

  392.                     var list = this.selectImages.map(function (image) {
    393. 

  393.                         return {
    394. 

  394.                             _src: image,
    395. 

  395.                             src: image
    396. 

  396.                         };
    397. 

  397.                     });
    398. 

  398.                     parent.insertEditor(list, parentinputname);
    399. 

  399.                     var index = parent.layer.getFrameIndex(window.name);
    400. 

  400.                     parent.layer.close(index)
    401. 

  401.                 } else {
    402. 

  402.                     //form表单中
    403. 

  403.                     if (parent.$f) {
    404. 

  404.                         var value = parent.$f.getValue(parentinputname);//父级input 值
    405. 

  405.                         var list = value || [];
    406. 

  406.                         for (var i = 0; i < this.selectImages.length; i++) {
    407. 

  407.                             if (value.indexOf(this.selectImages[i]) == -1) list.push(this.selectImages[i]);
    408. 

  408.                         }
    409. 

  409.                         parent.$f.changeField(parentinputname, list);
    410. 

  410.                         parent.$f.closeModal(parentinputname);
    411. 

  411.                     } else {
    412. 

  412.                         //独立图片选择页面
    413. 

  413.                         if(maxLength > 0 ){
    414. 

  414.                             if(this.selectImages.length > maxLength){
    415. 

  415.                                 return layList.msg('最多能选择' + maxLength + '张');
    416. 

  416.                             }
    417. 

  417.                             parent.changeIMG(parentinputname, this.selectImages,1);
    418. 

  418.                         }else{
    419. 

  419.                             if(this.selectImages.length > 1){
    420. 

  420.                                 return layList.msg('只能选择一张图片');
    421. 

  421.                             }
    422. 

  422.                             parent.changeIMG(parentinputname, this.selectImages[0]);
    423. 

  423.                         }
    424. 

  424.                         var index = parent.layer.getFrameIndex(window.name);
    425. 

  425.                         parent.layer.close(index);
    426. 

  426.                     }
    427. 

  427.                 }
    428. 

  428. 

  429.             },
    430. 

  430.             //图片选中和取消
    431. 

  431.             changImage: function (item, index) {
    432. 

  432.                 this.$set(item, 'isSelect', item.isSelect == undefined ? true : !item.isSelect);
    433. 

  433.                 var val = small == 1 ? item['satt_dir'] : item['att_dir'];
    434. 

  434.                 if (item.isSelect === true) {
    435. 

  435.                     this.selectImages[this.selectImages.length] = val;
    436. 

  436.                     this.selectImagesIDS[this.selectImages.length] = item['att_id'];
    437. 

  437.                     item.sort = this.selectImages.length;
    438. 

  438.                 } else {
    439. 

  439.                     this.selectImages.splice(this.selectImages.indexOf(val), 1);
    440. 

  440.                     this.selectImagesIDS.splice(this.selectImages.indexOf(item['att_id']), 1);
    441. 

  441.                     for (var i = 0; i < this.imageList.length; i++) {
    442. 

  442.                         if (this.imageList[i].sort > item.sort) {
    443. 

  443.                             this.imageList[i].sort = (this.imageList[i].sort - 1) >= 0 ? this.imageList[i].sort - 1 : 0;
    444. 

  444.                         }
    445. 

  445.                     }
    446. 

  446.                     item.sort = 0;
    447. 

  447.                 }
    448. 

  448.                 this.$set(this, 'selectImages', this.selectImages);
    449. 

  449.                 this.$set(this, 'selectImagesIDS', this.selectImagesIDS);
    450. 

  450.             },
    451. 

  451.             //获取图片列表
    452. 

  452.             getImageList: function () {
    453. 

  453.                 var that = this;
    454. 

  454.                 if (that.loading) return;
    455. 

  455.                 that.loading = true;
    456. 

  456.                 var index = layList.layer.load(1, {shade: [0.1, '#fff']});
    457. 

  457.                 layList.baseGet(this.U({
    458. 

  458.                     a: 'get_image_list',
    459. 

  459.                     q: {pid: this.pid, page: this.page, limit: this.limit, title: that.searchImage }
    460. 

  460.                 }), function (res) {
    461. 

  461.                     that.loading = false;
    462. 

  462. 

  463.                     var list = res.data.list;
    464. 

  464.                     for (var i = list.length; i--;) {
    465. 

  465.                         list[i].readonly = true;
    466. 

  466.                         list[i].isEdit = false;
    467. 

  467.                         if (!list[i].title) {
    468. 

  468.                             list[i].title = list[i].name.slice(0, list[i].name.lastIndexOf('.'));
    469. 

  469.                         }
    470. 

  470.                     }
    471. 

  471.                     that.$set(that, 'imageList', res.data.list);
    472. 

  472.                     layList.layer.close(index);
    473. 

  473.                     if (that.page == 1) {
    474. 

  474.                         layList.laypage.render({
    475. 

  475.                             elem: that.$refs.image_page
    476. 

  476.                             , count: res.data.count
    477. 

  477.                             , limit: that.limit
    478. 

  478.                             , theme: '#191C6E',
    479. 

  479.                             jump: function (obj) {
    480. 

  480.                                 that.page = obj.curr;
    481. 

  481.                             }
    482. 

  482.                         });
    483. 

  483.                     }
    484. 

  484.                 }, function () {
    485. 

  485.                     that.loading = false;
    486. 

  486.                     layList.layer.close(index);
    487. 

  487.                 });
    488. 

  488.             },
    489. 

  489.             //查询分类
    490. 

  490.             search: function () {
    491. 

  491. //                if(!this.searchTitle) return layList.msg('请输入搜索内容！');
    492. 

  492.                 this.getCategoryList();
    493. 

  493.             },
    494. 

  494.             //打开和关闭树形
    495. 

  495.             OpenTree: function (item, index) {
    496. 

  496.                 var vm = this;
    497. 

  497.                 if (item.child.length) {
    498. 

  498.                     vm.$set(vm.categoryList[index], 'isOpen', !item.isOpen);
    499. 

  499.                 }
    500. 

  500.                 if (vm.pid == item.id) {
    501. 

  501.                     return;
    502. 

  502.                 }
    503. 

  503.                 vm.pid = item.id;
    504. 

  504.                 vm.page = 1;
    505. 

  505.                 vm.getImageList();
    506. 

  506.                 // this.searchImage = '';
    507. 

  507.                 // this.pid = item.id;
    508. 

  508.                 // if (item.child.length) {
    509. 

  509.                 //     // item.isOpen == undefined ? false : item.isOpen;
    510. 

  510.                 //     // this.$set(this.categoryList[index], 'isOpen', !item.isOpen);
    511. 

  511.                 //     item.isOpen == undefined ? false : item.isOpen;
    512. 

  512.                 //     this.$set(this.categoryList[index], 'isOpen', !item.isOpen);
    513. 

  513.                 // } else {
    514. 

  514.                 //     this.page = 1;
    515. 

  515.                 //     this.$set(this, 'selectImages', []);
    516. 

  516.                 //     this.$set(this, 'selectImagesIDS', []);
    517. 

  517.                 //     this.getImageList();
    518. 

  518.                 // }
    519. 

  519.                 // this.uploadInst.reload({
    520. 

  520.                 //     url: this.U({a: 'upload'}) + '?pid=' + this.pid
    521. 

  521.                 // });
    522. 

  522.             },
    523. 

  523. 

  524. 

  525.             //组装URL
    526. 

  526.             U: function (opt) {
    527. 

  527.                 opt = typeof opt == 'object' ? opt : {};
    528. 

  528.                 return layList.U({m: 'admin', c: "widget.images", a: opt.a || '', q: opt.q || {}, p: opt.q || {}});
    529. 

  529.             },
    530. 

  530.             //获取分类
    531. 

  531.             getCategoryList: function () {
    532. 

  532.                 // var that = this;
    533. 

  533.                 // console.log(window);
    534. 

  534.                 // console.log(that);
    535. 

  535.                 // layList.baseGet(that.U({a: 'get_image_cate', q: {name: this.searchTitle}}), function (res) {
    536. 

  536.                 //     that.$set(that, 'categoryList', res.data);
    537. 

  537.                 // });
    538. 

  538.                 var vm = this;
    539. 

  539.                 layList.baseGet(vm.U({
    540. 

  540.                     a: 'get_image_cate',
    541. 

  541.                     q: {
    542. 

  542.                         name: vm.searchTitle
    543. 

  543.                     }
    544. 

  544.                 }), function (res) {
    545. 

  545.                     vm.categoryList = res.data;
    546. 

  546.                 }, function (err) {
    547. 

  547.                     layList.msg(err.msg);
    548. 

  548.                 });
    549. 

  549.             },
    550. 

  550.             //鼠标移入显示图标
    551. 

  551.             changeActive: function (item, indexK, index) {
    552. 

  552.                 if (index)
    553. 

  553.                     this.$set(this.categoryList[indexK]['child'], 'isShow', true);
    554. 

  554.                 else
    555. 

  555.                     this.$set(this.categoryList[indexK], 'isShow', true);
    556. 

  556.             },
    557. 

  557.             //鼠标移出隐藏
    558. 

  558.             removeActive: function (item, indexK, index) {
    559. 

  559.                 if (index)
    560. 

  560.                     this.$set(this.categoryList[indexK]['child'], 'isShow', false);
    561. 

  561.                 else
    562. 

  562.                     this.$set(this.categoryList[indexK], 'isShow', false);
    563. 

  563.             },
    564. 

  564.             //添加分类
    565. 

  565.             addCategory: function (item, pid) {
    566. 

  566.                 item = item == undefined ? {} : item;
    567. 

  567.                 var id = item.id == undefined ? 0 : item.id,
    568. 

  568.                     pid = pid == undefined ? 0 : pid;
    569. 

  569.                 return this.getOpenWindow(item.name ? item.name + '编辑' : '新增分类', this.U({
    570. 

  570.                     a: 'addcate',
    571. 

  571.                     q: {id: pid == 0 ? id : pid}
    572. 

  572.                 }));
    573. 

  573.             },
    574. 

  574.             //修改分类
    575. 

  575.             updateCategory: function (item, pid) {
    576. 

  576.                 item = item == undefined ? {} : item;
    577. 

  577.                 pid = pid == undefined ? 0 : pid;
    578. 

  578.                 return this.getOpenWindow(item.name + '编辑', this.U({a: 'editcate', q: {id: item.id}}));
    579. 

  579.             },
    580. 

  580.             //删除分类
    581. 

  581.             delCategory: function (item, pid) {
    582. 

  582.                 var that = this;
    583. 

  583.                 if (item.child.length) return layList.msg('请先删除子分类再尝试删除此分类！');
    584. 

  584.                 layList.layer.confirm('是否要删除[' + item.name + ']分类？', {
    585. 

  585.                     btn: ['是的我要删除', '我想想吧'] //按钮
    586. 

  586.                 }, function () {
    587. 

  587.                     layList.baseGet(that.U({a: 'deletecate', q: {id: item.id}}), function (res) {
    588. 

  588.                         layList.msg(res.msg, function () {
    589. 

  589.                             that.getCategoryList();
    590. 

  590.                         });
    591. 

  591.                     });
    592. 

  592.                 });
    593. 

  593.             },
    594. 

  594.             //打开一个窗口
    595. 

  595.             getOpenWindow: function (title, url, opt) {
    596. 

  596.                 opt = opt == undefined ? {w: 340, h: 265} : opt;
    597. 

  597.                 return layList.layer.open({
    598. 

  598.                     type: 2,
    599. 

  599.                     title: title,
    600. 

  600.                     shade: [0],
    601. 

  601.                     area: [opt.w + "px", opt.h + 'px'],
    602. 

  602.                     anim: 2,
    603. 

  603.                     content: [url, 'no'],
    604. 

  604.                 });
    605. 

  605.             },
    606. 

  606.             //回调
    607. 

  607.             SuccessCateg: function () {
    608. 

  608.                 this.getCategoryList();
    609. 

  609.             },
    610. 

  610.             uploal: function () {
    611. 

  611.                 var that = this;
    612. 

  612.                 this.uploadInst = layList.upload.render({
    613. 

  613.                     elem: this.$refs.upload
    614. 

  614.                     , url: this.U({a: 'upload'}) + '?pid=' + this.pid
    615. 

  615.                     , multiple: true
    616. 

  616.                     , auto: true
    617. 

  617.                     , size: 2097152 //限制文件大小，单位 KB
    618. 

  618.                     , done: function (res) {
    619. 

  619.                         layList.layer.msg('上传成功', {time: 2000});
    620. 

  620.                         that.page = 1;
    621. 

  621.                         that.getImageList();
    622. 

  622.                     }
    623. 

  623.                 });
    624. 

  624.             }
    625. 

  625.         },
    626. 

  626.         mounted: function () {
    627. 

  627.             this.getCategoryList();
    628. 

  628.             this.getImageList();
    629. 

  629.             window.SuccessCateg = this.SuccessCateg;
    630. 

  630.             this.uploal();
    631. 

  631.         }
    632. 

  632.     })
    633. 

  633. 

  634. 

  635. </script>
    636. 

  636.