link-configuration.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <style lang="less" scoped>
  2. @import "../account-config.less";
  3. </style>
  4. <template>
  5. <div class="account-config-content">
  6. <div class="control-con-header">
  7. <a-form
  8. class="grid-form"
  9. layout="inline"
  10. hide-required-mark
  11. >
  12. <a-row class="grid-form-options">
  13. <a-form-item
  14. class="grid-form-item"
  15. label="账户"
  16. :colon="false"
  17. >
  18. <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false" request="1,3"></acount-search>
  19. </a-form-item>
  20. <a-form-item label="状态">
  21. <a-select v-model="searchStatus" style="width: 100px">
  22. <a-select-option :value="0">不限</a-select-option>
  23. <a-select-option :value="1">开启</a-select-option>
  24. <a-select-option :value="2">关闭</a-select-option>
  25. </a-select>
  26. </a-form-item>
  27. <a-form-item class="form-handle-btn">
  28. <a-button type="primary" html-type="submit" @click="searchClick">查询</a-button>
  29. </a-form-item>
  30. </a-row>
  31. </a-form>
  32. <a-button type="primary" class="upload-person" @click="addLink">添加</a-button>
  33. </div>
  34. <div class="control-con-table">
  35. <a-table
  36. ref="table"
  37. size="middle"
  38. bordered
  39. :loading="controlLoading"
  40. :columns="columns"
  41. :dataSource="dataSource"
  42. :pagination="false">
  43. <span slot="acountRelax" slot-scope="text, record">
  44. <a-switch :checked="record.warningFlag == '1'" @change="handleSwitchChang($event, record)"/>
  45. </span>
  46. <span slot="action" slot-scope="text, record">
  47. <a @click="handleEdit(record)">编辑</a>
  48. </span>
  49. </a-table>
  50. <a-pagination
  51. class="pagin-table-class"
  52. :total="totalAll"
  53. :show-total="total => `共 ${totalAll} 条`"
  54. size="small"
  55. show-size-changer
  56. show-quick-jumper
  57. @change="onShowSizeChange"
  58. @showSizeChange="onShowSizeChange"
  59. />
  60. </div>
  61. <a-modal
  62. :title="linkTitle"
  63. v-if="visible"
  64. :visible="visible"
  65. :confirm-loading="confirmLoading"
  66. :width="850"
  67. @ok="handleOk"
  68. @cancel="handleCancel">
  69. <a-form-model
  70. ref="ruleForm"
  71. :model="configForm"
  72. :rules="rules"
  73. :label-col="labelCol"
  74. :wrapper-col="wrapperCol"
  75. >
  76. <a-form-model-item label="广告账户">
  77. <acount-search style="width: 100%;" :disabled="linkTitle == '修改配置'" :appId.sync="configForm.advertisementacountId" :multiple="false" request="1,3"></acount-search>
  78. </a-form-model-item>
  79. <a-form-model-item label="有效触点" prop="linkAddress">
  80. <a-input placeholder="请输入链接地址" allow-clear v-model="configForm.linkAddress"/>
  81. </a-form-model-item>
  82. </a-form-model>
  83. </a-modal>
  84. </div>
  85. </template>
  86. <script>
  87. import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
  88. import {mapGetters} from 'vuex';
  89. import {getAction, postAction,putAction} from '@/api/manage';
  90. import {urlAcount} from '../account-config-server.js';
  91. export default{
  92. name: 'link-configuration',
  93. components:{AcountSearch},
  94. data() {
  95. return {
  96. linkTitle:'',
  97. visible:false,
  98. confirmLoading:false,
  99. acountId: undefined,
  100. labelCol: {span: 4},
  101. wrapperCol: {span: 14},
  102. searchStatus:0,
  103. controlLoading: true,
  104. dataSource: [],
  105. configForm:{
  106. advertisementacountId:undefined,
  107. linkAddress:'',
  108. },
  109. rules:{
  110. linkAddress:[
  111. {required: true, message: '请输入', trigger: 'blur'},
  112. ],
  113. },
  114. columns:[
  115. {
  116. title: '开关',
  117. align: 'center',
  118. width:80,
  119. dataIndex: 'acountRelax',
  120. scopedSlots: {customRender: 'acountRelax'}
  121. },{
  122. title: '项目名称',
  123. align: 'center',
  124. width:100,
  125. dataIndex:'projectName',
  126. },{
  127. title: '账户名称',
  128. align: 'center',
  129. width:150,
  130. dataIndex:'accountName',
  131. },{
  132. title: '账户ID',
  133. align: 'center',
  134. width:150,
  135. dataIndex:'accountId',
  136. },{
  137. title: '第三方点击监测链接',
  138. align: 'center',
  139. width:350,
  140. dataIndex:'actionTrackUrl',
  141. },{
  142. title: '账户所属人',
  143. align: 'center',
  144. width:100,
  145. dataIndex:'operateUserName',
  146. },{
  147. title: '状态',
  148. align: 'center',
  149. width:100,
  150. dataIndex:'warningFlag',
  151. customRender: function (text) {
  152. if (text == 1) {
  153. return '开启'
  154. } else if (text == 2) {
  155. return '关闭'
  156. }
  157. },
  158. },{
  159. title: '操作',
  160. dataIndex: 'action',
  161. align: 'center',
  162. width: '10%',
  163. scopedSlots: {customRender: 'action'}
  164. }
  165. ],
  166. totalAll: 0,
  167. tablePag: {
  168. page: 1,
  169. size: 10
  170. },
  171. createUserId:'',
  172. }
  173. },
  174. mounted() {
  175. this.handleInitTable();
  176. },
  177. methods: {
  178. ...mapGetters(['userInfo']),
  179. // 查询
  180. handleInitTable(){
  181. let params = {
  182. userId: this.userInfo().id,
  183. accountId:this.acountId,
  184. warningFlag:this.searchStatus == 0 ? '' : this.searchStatus,
  185. pageNo: this.tablePag.page,
  186. pageSize: this.tablePag.size
  187. }
  188. getAction(urlAcount + '/bytedance-api/ad/bytedancePlanJobController/selectAccountActionTrackUrlList', params).then(res => {
  189. if (res.code === 0) {
  190. this.controlLoading = false;
  191. this.dataSource = res.result.list;
  192. this.totalAll = res.result.total;
  193. }
  194. else {
  195. this.controlLoading = false;
  196. this.$message.error(res.message);
  197. }
  198. }).catch(error => {
  199. console.log(error, 'eeee');
  200. });
  201. },
  202. // 新增
  203. addLink(){
  204. this.configForm.advertisementacountId = undefined;
  205. this.configForm.linkAddress = '';
  206. this.linkTitle = '添加配置'
  207. this.visible = true;
  208. },
  209. // 编辑
  210. handleEdit(item){
  211. this.linkTitle = '修改配置'
  212. this.visible = true;
  213. this.createUserId = item.createUserId;
  214. this.configForm.advertisementacountId = item.accountId;
  215. this.configForm.linkAddress = item.actionTrackUrl;
  216. },
  217. // 确定
  218. handleOk(){
  219. if (this.configForm.advertisementacountId) {
  220. this.$refs.ruleForm.validate(valid => {
  221. if (valid) {
  222. this.controlLoading = true;
  223. if (this.linkTitle == '添加配置') {
  224. let params = {
  225. accountId:this.configForm.advertisementacountId,
  226. actionTrackUrl:this.configForm.linkAddress,
  227. createUserId:this.userInfo().id
  228. }
  229. postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/insertAccountTrackUrl',params).then(res=>{
  230. if (res.code == 0) {
  231. this.visible = false;
  232. this.handleInitTable();
  233. this.$message.success('新增成功');
  234. }else{
  235. this.controlLoading = false;
  236. this.$message.error(res.message);
  237. }
  238. }).catch(error => {
  239. console.log(error, 'eeee');
  240. });
  241. }else{
  242. let params = {
  243. accountId:this.configForm.advertisementacountId,
  244. actionTrackUrl:this.configForm.linkAddress,
  245. createUserId:this.createUserId
  246. }
  247. postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/updAccountActionTrackUrl',params).then(res=>{
  248. if (res.code == 0) {
  249. this.visible = false;
  250. this.handleInitTable();
  251. this.$message.success('修改成功');
  252. }else{
  253. this.controlLoading = false;
  254. this.$message.error(res.message);
  255. }
  256. }).catch(error => {
  257. console.log(error, 'eeee');
  258. });
  259. }
  260. }
  261. else {
  262. console.log('error submit!!');
  263. return false;
  264. }
  265. });
  266. }else{
  267. this.$message.error('请选择广告账户');
  268. }
  269. },
  270. // 开关
  271. handleSwitchChang(checked, data){
  272. this.controlLoading = true;
  273. let params = {
  274. accountId:data.accountId,
  275. warningFlag:checked?1:2,
  276. createUserId:this.userInfo().id
  277. }
  278. postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/updAccountActionTrackUrl',params).then(res=>{
  279. if (res.code == 0) {
  280. this.$message.success(res.message);
  281. this.handleInitTable();
  282. }else {
  283. this.$message.error(res.message);
  284. }
  285. }).catch(error => {
  286. console.log(error, 'eeee');
  287. });
  288. },
  289. // 取消
  290. handleCancel(){
  291. this.configForm.advertisementacountId = undefined;
  292. this.configForm.linkAddress = '';
  293. this.visible = false;
  294. this.controlLoading = false;
  295. },
  296. searchClick(){
  297. this.controlLoading = true;
  298. this.tablePag.page = 1;
  299. this.handleInitTable();
  300. },
  301. onShowSizeChange(current, pageSize) {
  302. this.tablePag = {
  303. page: current,
  304. size: pageSize
  305. };
  306. this.controlLoading = true;
  307. this.handleInitTable();
  308. },
  309. },
  310. }
  311. </script>