crowedPackage.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  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="dataSource"
  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-popconfirm
  84. v-if="dataSource.length"
  85. title="Sure to delete?"
  86. @confirm="() => onDelete(record.key)"
  87. >
  88. <a href="javascript:;">删除</a>
  89. </a-popconfirm>
  90. </span>
  91. <span slot="parentGroup" slot-scope="text">
  92. <a href="javascript:;" >{{text}}</a>
  93. </span>
  94. <span slot="parentPlan" slot-scope="text">
  95. <a href="javascript:;" >{{text}}</a>
  96. </span>
  97. </a-table>
  98. </div>
  99. </div>
  100. </div>
  101. </template>
  102. <script>
  103. import moment from 'moment';
  104. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  105. import editableCell from './editableCell'
  106. import { TreeSelect } from 'ant-design-vue';
  107. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  108. let rowSelection={
  109. onChange: (selectedRowKeys, selectedRows) => {
  110. console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  111. console.log(selectedRowKeys);
  112. this.selectedRowKeys=selectedRowKeys;
  113. },
  114. onSelect: (record, selected, selectedRows) => {
  115. console.log(record, selected, selectedRows);
  116. },
  117. onSelectAll: (selected, selectedRows, changeRows) => {
  118. console.log(selected, selectedRows, changeRows);
  119. },
  120. }
  121. export default {
  122. components: {
  123. editableCell,
  124. },
  125. data() {
  126. return {
  127. //treeselect的参数
  128. treeValue: [],
  129. treeData: [],
  130. SHOW_PARENT,
  131. accountId:[],
  132. dateValue:null,//日期选择器
  133. //主页的表格
  134. dataSource:[],
  135. columns,
  136. selectedRowKeys:[],
  137. rowSelection,
  138. editID:0,
  139. }
  140. },
  141. methods: {
  142. //项目改变后的事件
  143. treeChange(val) {
  144. // console.log(this.treeData)
  145. console.log(val)
  146. this.accountId = [];
  147. //选择一个后禁用其他
  148. if(val.length==1){
  149. if(val[0]*1){
  150. let selectindex=0
  151. this.treeData.forEach((ele,index)=>{
  152. if(ele.children){
  153. ele.children.map((item,ind)=>{
  154. if(item.value==val[0]){
  155. selectindex=index;
  156. }
  157. })
  158. }
  159. });
  160. console.log(selectindex)
  161. if(selectindex ||selectindex==0){
  162. this.treeData.forEach((ele,index)=>{
  163. if(index!=selectindex){
  164. ele.disableCheckbox = true;
  165. if(ele.children){
  166. ele.children.map((item,ind)=>{
  167. item.disableCheckbox = true;
  168. })
  169. }
  170. }
  171. })
  172. }
  173. }else{
  174. // console.log(1)
  175. this.treeData.forEach((ele,index)=>{
  176. if(ele.value!=val[0]){
  177. ele.disableCheckbox = true;
  178. if(ele.children){
  179. ele.children.forEach((item,ind)=>{
  180. item.disableCheckbox = true;
  181. })
  182. }
  183. }
  184. })
  185. }
  186. }
  187. if(val.length==0){
  188. this.treeData.forEach((ele,index)=>{
  189. ele.disableCheckbox = false;
  190. this.mediaId=ele.mediaId;
  191. if(ele.children){
  192. ele.children.forEach((item,ind)=>{
  193. item.disableCheckbox = false;
  194. })
  195. }
  196. });
  197. }
  198. if(val){
  199. val.forEach((ele,index)=>{
  200. if(ele*1){
  201. this.accountId.push(ele.value)
  202. }else{
  203. let projectArr=this.treeData.filter((item)=>{
  204. return item.value==ele
  205. });
  206. console.log(projectArr)
  207. projectArr[0].children.forEach((element)=>{
  208. this.accountId.push(element.value)
  209. })
  210. }
  211. })
  212. }
  213. console.log(this.accountId)
  214. },
  215. treeSearch(){
  216. console.log(arguments);
  217. },
  218. treeSelect(){
  219. // console.log(arguments);
  220. // this.treeValue=arguments[0].value
  221. },
  222. //日期改变
  223. dateChange(date, dateString) {
  224. console.log(date, dateString);
  225. this.dateValue=date;
  226. },
  227. //按名字搜索
  228. onSearch(value) {
  229. console.log(value);
  230. },
  231. //查询按钮
  232. search(){
  233. },
  234. //表格里的删除按钮
  235. onDelete(key) {
  236. const dataSource = [...this.dataSource];
  237. this.dataSource = dataSource.filter(item => item.key !== key);
  238. },
  239. },
  240. filters: {
  241. toPercentage(val) {
  242. if(val){
  243. if(typeof val != 'string'){
  244. return (val * 100).toFixed(2) + '%'
  245. }else{
  246. return val
  247. }
  248. }else if(typeof val =='string'){
  249. return val
  250. }
  251. else{
  252. return 0
  253. }
  254. },
  255. //保留两位小数并且变成货币格式
  256. decimalsHandle(val){
  257. if(val && typeof val !='string'){
  258. val=parseFloat(val).toFixed(2);
  259. let numberStr = val.toString()
  260. let str = numberStr.split('.')
  261. let str0=str[0].split('').reverse();
  262. for (let i = 0; i < str0.length; i++) {
  263. if ((i + 1) % 4 === 0) {
  264. str0.splice(i, 0, ',')
  265. }
  266. }
  267. str0.reverse()
  268. let handleResult = ''
  269. for (let j = 0; j < str0.length; j++) {
  270. handleResult += str0[j]
  271. }
  272. return handleResult+'.'+str[1]
  273. }else if(typeof val =='string'){
  274. return val
  275. }
  276. else{
  277. return 0
  278. }
  279. },
  280. //变成货币格式
  281. formatCurrency(val){
  282. if((val||val==0)&& typeof val !='string'){
  283. let numberStr = val.toString()
  284. let str = numberStr.split('').reverse()
  285. for (let i = 0; i < str.length; i++) {
  286. if ((i + 1) % 4 === 0) {
  287. str.splice(i, 0, ',')
  288. }
  289. }
  290. str.reverse()
  291. let handleResult = ''
  292. for (let j = 0; j < str.length; j++) {
  293. handleResult += str[j]
  294. }
  295. return handleResult
  296. }else if(typeof val =='string'){
  297. return val
  298. }
  299. else{
  300. return '-'
  301. }
  302. }
  303. }
  304. }
  305. </script>
  306. <style lang="scss" scoped>
  307. .crowedPackage{
  308. .optHeader{
  309. margin: 15px 0;
  310. background: #fff;
  311. .optinItem{
  312. display: inline-block;
  313. margin-right: 15px;
  314. .ok{
  315. margin-right: 15px;
  316. }
  317. }
  318. .optionBtn{
  319. // display: inline-block;
  320. float: right;
  321. .searchBtn{
  322. margin-right: 10px;
  323. }
  324. }
  325. }
  326. .optHeader:hover{
  327. box-shadow: 0 0 15px rgba(0,0,0,.2);
  328. border-radius: 10px;
  329. }
  330. .tableBOX{
  331. .tableOpt{
  332. margin-bottom: 10px;
  333. .search{
  334. margin-right: 15px;
  335. }
  336. .addCol{
  337. float:right;
  338. }
  339. }
  340. }
  341. }
  342. </style>