crowedPackage.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. <template>
  2. <div class="crowedPackage">
  3. <div class="optHeader">
  4. <div class="top">
  5. <span class="optItem">
  6. <a-tree-select
  7. v-model="treeValue"
  8. show-search
  9. style="width: 600px;height:30px"
  10. :dropdownMatchSelectWidth='true'
  11. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  12. tree-checkable
  13. searchPlaceholder='请输入账户关键字搜索'
  14. :show-checked-strategy="SHOW_PARENT"
  15. placeholder="请选择账户或搜索账户关键字"
  16. treeNodeFilterProp="title"
  17. :allowClear="true"
  18. @change="treeChange"
  19. @search="treeSearch"
  20. @select="treeSelect"
  21. :maxTagCount='1'
  22. :tree-data="treeData"
  23. :filterOption='filterOption'
  24. >
  25. </a-tree-select>
  26. </span>
  27. <span class="optItem">
  28. <a-date-picker @change="dateChange" />
  29. </span>
  30. </div>
  31. <div class="bottom">
  32. <div class="optItem">
  33. <a-select :size="size" placeholder='覆盖数量' style="width: 200px" @change="handleChange">
  34. <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  35. {{ (i + 9).toString(36) + i }}
  36. </a-select-option>
  37. </a-select>
  38. </div>
  39. <div class="optItem">
  40. <a-select :size="size" placeholder='类别' style="width: 200px" @change="handleChange">
  41. <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  42. {{ (i + 9).toString(36) + i }}
  43. </a-select-option>
  44. </a-select>
  45. </div>
  46. <div class="optItem">
  47. <a-input-search placeholder="input search text" style="width: 200px" @search="onSearch" />
  48. </div>
  49. <div class="optionBtn">
  50. <a-button class="search" type='primary' @click="search">查询</a-button>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="tableBOX">
  55. <div class="tableOpt">
  56. <a-button class="search" type='primary' @click="search">查询</a-button>
  57. <a-button class="search" type='primary' @click="search">同步</a-button>
  58. <a-select :size="size" placeholder='批量操作' style="width: 200px" @change="handleChange">
  59. <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  60. {{ (i + 9).toString(36) + i }}
  61. </a-select-option>
  62. </a-select>
  63. <a-button class="addCol" type='primary' @click="search">自定义列</a-button>
  64. </div>
  65. <div class="tableArea">
  66. <a-table
  67. :columns="columns"
  68. :data-source="data"
  69. :row-selection="rowSelection"
  70. bordered
  71. >
  72. <template slot="campaignName" slot-scope="text,record">
  73. <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />
  74. </template>
  75. <span slot="groupBudget" slot-scope="text,record">
  76. <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" />
  77. </span>
  78. <span slot="status" slot-scope="text,record">
  79. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  80. </span>
  81. <span slot="options" slot-scope="record">
  82. <a href="javascript:;" style="margin-right:10px">编辑</a>
  83. <a href="javascript:;" v-if="tabkey=='plan'" @click="copyPlan(record)">复制</a>
  84. <a href="javascript:;" v-if="tabkey=='idea'">预览</a>
  85. </span>
  86. <span slot="parentGroup" slot-scope="text">
  87. <a href="javascript:;" >{{text}}</a>
  88. </span>
  89. <span slot="parentPlan" slot-scope="text">
  90. <a href="javascript:;" >{{text}}</a>
  91. </span>
  92. </a-table>
  93. </div>
  94. </div>
  95. </div>
  96. </template>
  97. <script>
  98. import moment from 'moment';
  99. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  100. import editableCell from './editableCell'
  101. import { TreeSelect } from 'ant-design-vue';
  102. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  103. let rowSelection={
  104. onChange: (selectedRowKeys, selectedRows) => {
  105. console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  106. console.log(selectedRowKeys);
  107. this.selectedRowKeys=selectedRowKeys;
  108. },
  109. onSelect: (record, selected, selectedRows) => {
  110. console.log(record, selected, selectedRows);
  111. },
  112. onSelectAll: (selected, selectedRows, changeRows) => {
  113. console.log(selected, selectedRows, changeRows);
  114. },
  115. }
  116. export default {
  117. components: {
  118. editableCell,
  119. },
  120. data() {
  121. return {
  122. //treeselect的参数
  123. treeValue: [],
  124. treeData: [],
  125. SHOW_PARENT,
  126. accountId:[],
  127. dateValue:null,//日期选择器
  128. //主页的表格
  129. data:[],
  130. columns,
  131. selectedRowKeys:[],
  132. rowSelection,
  133. editID:0,
  134. }
  135. },
  136. methods: {
  137. //项目改变后的事件
  138. treeChange(val) {
  139. // console.log(this.treeData)
  140. console.log(val)
  141. this.accountId = [];
  142. //选择一个后禁用其他
  143. if(val.length==1){
  144. if(val[0]*1){
  145. let selectindex=0
  146. this.treeData.forEach((ele,index)=>{
  147. if(ele.children){
  148. ele.children.map((item,ind)=>{
  149. if(item.value==val[0]){
  150. selectindex=index;
  151. }
  152. })
  153. }
  154. });
  155. console.log(selectindex)
  156. if(selectindex ||selectindex==0){
  157. this.treeData.forEach((ele,index)=>{
  158. if(index!=selectindex){
  159. ele.disableCheckbox = true;
  160. if(ele.children){
  161. ele.children.map((item,ind)=>{
  162. item.disableCheckbox = true;
  163. })
  164. }
  165. }
  166. })
  167. }
  168. }else{
  169. // console.log(1)
  170. this.treeData.forEach((ele,index)=>{
  171. if(ele.value!=val[0]){
  172. ele.disableCheckbox = true;
  173. if(ele.children){
  174. ele.children.forEach((item,ind)=>{
  175. item.disableCheckbox = true;
  176. })
  177. }
  178. }
  179. })
  180. }
  181. }
  182. if(val.length==0){
  183. this.treeData.forEach((ele,index)=>{
  184. ele.disableCheckbox = false;
  185. this.mediaId=ele.mediaId;
  186. if(ele.children){
  187. ele.children.forEach((item,ind)=>{
  188. item.disableCheckbox = false;
  189. })
  190. }
  191. });
  192. }
  193. if(val){
  194. val.forEach((ele,index)=>{
  195. if(ele*1){
  196. this.accountId.push(ele.value)
  197. }else{
  198. let projectArr=this.treeData.filter((item)=>{
  199. return item.value==ele
  200. });
  201. console.log(projectArr)
  202. projectArr[0].children.forEach((element)=>{
  203. this.accountId.push(element.value)
  204. })
  205. }
  206. })
  207. }
  208. console.log(this.accountId)
  209. },
  210. treeSearch(){
  211. console.log(arguments);
  212. },
  213. treeSelect(){
  214. // console.log(arguments);
  215. // this.treeValue=arguments[0].value
  216. },
  217. //日期改变
  218. dateChange(date, dateString) {
  219. console.log(date, dateString);
  220. this.dateValue=date;
  221. },
  222. //按名字搜索
  223. onSearch(value) {
  224. console.log(value);
  225. },
  226. //查询按钮
  227. search(){
  228. },
  229. },
  230. filters: {
  231. toPercentage(val) {
  232. if(val){
  233. if(typeof val != 'string'){
  234. return (val * 100).toFixed(2) + '%'
  235. }else{
  236. return val
  237. }
  238. }else if(typeof val =='string'){
  239. return val
  240. }
  241. else{
  242. return 0
  243. }
  244. },
  245. //保留两位小数并且变成货币格式
  246. decimalsHandle(val){
  247. if(val && typeof val !='string'){
  248. val=parseFloat(val).toFixed(2);
  249. let numberStr = val.toString()
  250. let str = numberStr.split('.')
  251. let str0=str[0].split('').reverse();
  252. for (let i = 0; i < str0.length; i++) {
  253. if ((i + 1) % 4 === 0) {
  254. str0.splice(i, 0, ',')
  255. }
  256. }
  257. str0.reverse()
  258. let handleResult = ''
  259. for (let j = 0; j < str0.length; j++) {
  260. handleResult += str0[j]
  261. }
  262. return handleResult+'.'+str[1]
  263. }else if(typeof val =='string'){
  264. return val
  265. }
  266. else{
  267. return 0
  268. }
  269. },
  270. //变成货币格式
  271. formatCurrency(val){
  272. if((val||val==0)&& typeof val !='string'){
  273. let numberStr = val.toString()
  274. let str = numberStr.split('').reverse()
  275. for (let i = 0; i < str.length; i++) {
  276. if ((i + 1) % 4 === 0) {
  277. str.splice(i, 0, ',')
  278. }
  279. }
  280. str.reverse()
  281. let handleResult = ''
  282. for (let j = 0; j < str.length; j++) {
  283. handleResult += str[j]
  284. }
  285. return handleResult
  286. }else if(typeof val =='string'){
  287. return val
  288. }
  289. else{
  290. return '-'
  291. }
  292. }
  293. }
  294. }
  295. </script>
  296. <style lang="scss" scoped>
  297. .crowedPackage{
  298. .optHeader{
  299. margin: 15px 0;
  300. background: #fff;
  301. .optinItem{
  302. display: inline-block;
  303. margin-right: 15px;
  304. .ok{
  305. margin-right: 15px;
  306. }
  307. }
  308. .optionBtn{
  309. // display: inline-block;
  310. float: right;
  311. .searchBtn{
  312. margin-right: 10px;
  313. }
  314. }
  315. }
  316. .optHeader:hover{
  317. box-shadow: 0 0 15px rgba(0,0,0,.2);
  318. border-radius: 10px;
  319. }
  320. .tableBOX{
  321. .tableOpt{
  322. margin-bottom: 10px;
  323. .search{
  324. margin-right: 15px;
  325. }
  326. .addCol{
  327. float:right;
  328. }
  329. }
  330. }
  331. }
  332. </style>