projectListModal.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. <template>
  2. <a-modal
  3. :title="title"
  4. :width="800"
  5. :visible="visible"
  6. :confirmLoading="confirmLoading"
  7. @ok="handleOk"
  8. @cancel="handleCancel"
  9. cancelText="关闭"
  10. >
  11. <a-spin :spinning="confirmLoading">
  12. <a-form :form="form">
  13. <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="媒体类型">
  14. <a-radio-group @change="onChange" v-model="model.mediaId">
  15. <a-radio-button value="1">头条</a-radio-button>
  16. <a-radio-button value="2">快手</a-radio-button>
  17. <a-radio-button value="3">头条内广</a-radio-button>
  18. <a-radio-button value="4">快手内广</a-radio-button>
  19. </a-radio-group>
  20. </a-form-item> -->
  21. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目名称" >
  22. <a-input placeholder="请输入项目名称" v-decorator="['projectName', validatorRules.projectName]" disabled/>
  23. </a-form-item>
  24. <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="行业">
  25. <j-tree-select ref="treeSelect" placeholder="请选择行业" v-decorator="['industryId']"
  26. dict="sys_category,name,id" pidField="pid" pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76">
  27. </j-tree-select>
  28. </a-form-item>-->
  29. <a-form-item
  30. :labelCol="labelCol"
  31. :wrapperCol="wrapperCol"
  32. label="供应商"
  33. v-if="model.mediaId=='2'||model.mediaId=='4'"
  34. >
  35. <a-select
  36. optionFilterProp="children"
  37. showSearch
  38. :filterOption="filterOption"
  39. v-decorator="['supplierCode', validatorRules.supplierCode]"
  40. >
  41. <a-select-option
  42. :value="item.supplierCode"
  43. v-for="(item, index) of supplierList"
  44. :key="index"
  45. >
  46. {{
  47. item.supplierName
  48. }}
  49. </a-select-option>
  50. </a-select>
  51. </a-form-item>
  52. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="广告主名称">
  53. <a-select
  54. @change="handleChange"
  55. optionFilterProp="children"
  56. showSearch
  57. :filterOption="filterOption"
  58. v-decorator="['advertiserId', validatorRules.advertiserId]"
  59. placeholder="请选择广告主"
  60. disabled
  61. >
  62. <a-select-option :value="item.id" v-for="(item, index) of list" :key="index">
  63. {{
  64. item.name
  65. }}
  66. </a-select-option>
  67. </a-select>
  68. </a-form-item>
  69. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="产品名称">
  70. <a-select
  71. optionFilterProp="children"
  72. showSearch
  73. :filterOption="filterOption"
  74. v-decorator="['productId']"
  75. placeholder="请选择产品"
  76. disabled
  77. >
  78. <a-select-option :value="item.id" v-for="(item, index) of listProduct" :key="index">
  79. {{
  80. item.productName
  81. }}
  82. </a-select-option>
  83. </a-select>
  84. </a-form-item>
  85. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="最高出价">
  86. <a-input
  87. placeholder="请输入最高出价"
  88. v-decorator="['maxBid', validatorRules.maxBid]"
  89. addonAfter="元"
  90. />
  91. </a-form-item>
  92. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="最高转化出价">
  93. <a-input placeholder="最高转化出价" v-decorator="['maxDeepCpaBid']" addonAfter="元" />
  94. </a-form-item>
  95. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售">
  96. <a-select
  97. showSearch
  98. optionFilterProp="children"
  99. style="width: 100%"
  100. :filterOption="filterOption"
  101. v-decorator="['saleId',{ rules: [{ required: true,message: '请选择销售' }] } ]"
  102. >
  103. <!-- -->
  104. <a-select-option
  105. v-for="appModel in optionsElse"
  106. :key="appModel.userId + new Date().getTime()"
  107. :value="appModel.userId"
  108. >{{ appModel.realName }}&#12288;&#12288;{{ appModel.roleName }}</a-select-option>
  109. </a-select>
  110. </a-form-item>
  111. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="运营负责人">
  112. <a-select
  113. showSearch
  114. optionFilterProp="children"
  115. style="width: 100%"
  116. @focus="handleFocus"
  117. @blur="handleBlur"
  118. :filterOption="filterOption"
  119. v-decorator="['responsibleId', { rules: [{ required: true, message: '请选择运营负责人' }] }]"
  120. >
  121. <a-select-option
  122. v-for="appModel in options"
  123. :key="appModel.userId + new Date().getTime()"
  124. :value="appModel.userId"
  125. >{{ appModel.realName }}&#12288;&#12288;{{ appModel.roleName }}</a-select-option>
  126. </a-select>
  127. </a-form-item>
  128. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="设计负责人">
  129. <a-select
  130. showSearch
  131. optionFilterProp="children"
  132. style="width: 100%"
  133. @focus="handleFocus"
  134. @blur="handleBlur"
  135. :filterOption="filterOption"
  136. v-decorator="['designResponsibleId', { rules: [{ required: true, message: '请选择设计负责人' }] }]"
  137. >
  138. <a-select-option
  139. v-for="appModel in options"
  140. :key="appModel.userId + new Date().getTime()"
  141. :value="appModel.userId"
  142. >{{ appModel.realName }}&#12288;&#12288;{{ appModel.roleName }}</a-select-option>
  143. </a-select>
  144. </a-form-item>
  145. </a-form>
  146. </a-spin>
  147. </a-modal>
  148. </template>
  149. <script>
  150. import { httpAction, getAction } from '@/api/manage'
  151. import pick from 'lodash.pick'
  152. import moment from 'moment'
  153. import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  154. import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  155. import JTreeSelect from '@/components/jeecg/JTreeSelect'
  156. import { mapGetters } from 'vuex'
  157. export default {
  158. name: 'ProjectModal',
  159. components: {
  160. JSelectUserByDep,
  161. JSelectDepart,
  162. JTreeSelect,
  163. },
  164. data() {
  165. return {
  166. title: '操作',
  167. visible: false,
  168. model: {},
  169. labelCol: {
  170. xs: { span: 24 },
  171. sm: { span: 5 },
  172. },
  173. wrapperCol: {
  174. xs: { span: 24 },
  175. sm: { span: 16 },
  176. },
  177. industryId: '',
  178. confirmLoading: false,
  179. form: this.$form.createForm(this),
  180. validatorRules: {
  181. projectName: { rules: [{ required: true, message: '请输入项目名称!' }] },
  182. industryId: { rules: [{ required: true, message: '请选择行业!' }] },
  183. advertiserId: { rules: [{ required: true, message: '请选择广告主!' }] },
  184. productId: { rules: [{ required: true, message: '请选择产品!' }] },
  185. supplierCode: { rules: [{ required: true, message: '请选择供应商!' }], initialValue: 'kuaishou_001' },
  186. responsibleName: { rules: [{ required: true, message: '请选择负责人!' }] },
  187. maxBid: { rules: [{ required: true, message: '请输入最高出价!' }, { validator: this.validateInputCode }] },
  188. },
  189. url: {
  190. add: '/ctop/project/add',
  191. edit: '/ctop/project/edit',
  192. getList: '/ctop/advertiser/list',
  193. },
  194. list: [],
  195. listProduct: [],
  196. resId: '',
  197. shejiId: '',
  198. options: [],
  199. optionsElse: [],
  200. supplierList: [],
  201. editAll: false,
  202. }
  203. },
  204. created() {
  205. this.getSupplierList()
  206. },
  207. methods: {
  208. validateInputCode(rule, value, callback) {
  209. if (!value || value > 0) {
  210. callback()
  211. } else {
  212. callback('请输入大于0的最高报价!')
  213. }
  214. },
  215. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  216. onChange(e) {
  217. console.log(`checked = ${e.target.value}`)
  218. },
  219. handleChange(value) {
  220. console.log(value)
  221. getAction('/ctop/product/list', { advertiserId: value, pageSize: 1000 }).then((res) => {
  222. if (res.success) {
  223. this.listProduct = res.result.records
  224. }
  225. })
  226. },
  227. handleBlur() {
  228. console.log('blur')
  229. },
  230. handleFocus() {
  231. console.log('focus')
  232. },
  233. filterOption(input, option) {
  234. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  235. },
  236. getList() {
  237. var params = {}
  238. // params.userId = this.userInfo().id
  239. params.pageSize = 1000
  240. params.pageNo = 1
  241. console.log(params)
  242. getAction(this.url.getList,params)
  243. .then((res) => {
  244. if (res.success) {
  245. console.log(res)
  246. this.list = res.result.records
  247. } else {
  248. this.$message.warning(res.message)
  249. }
  250. })
  251. .finally(() => {})
  252. },
  253. getSupplierList() {
  254. var params = {}
  255. getAction('/ctop/supplierList/list').then((res) => {
  256. if (res.success) {
  257. this.supplierList = res.result.records
  258. } else {
  259. this.$message.warning(res.message)
  260. }
  261. })
  262. },
  263. add(item) {
  264. this.editAll = false
  265. this.edit({
  266. responsibleId: this.userInfo().id, //用户Id
  267. mediaId: '2',
  268. ...item,
  269. })
  270. },
  271. edit(record) {
  272. this.getSupplierList()
  273. this.getList()
  274. if (record.advertiserId) {
  275. this.editAll = true
  276. getAction('/ctop/product/list', { advertiserId: record.advertiserId, pageSize: 1000 }).then((res) => {
  277. if (res.success) {
  278. this.listProduct = res.result.records
  279. }
  280. })
  281. }
  282. var params = { ...record }
  283. console.log(record)
  284. this.form.resetFields()
  285. this.model = Object.assign({}, params)
  286. this.model.maxBid = this.model.maxBid ? this.model.maxBid / 1000 : 0
  287. this.model.maxDeepCpaBid = this.model.maxDeepCpaBid ? this.model.maxDeepCpaBid / 1000 : 0
  288. this.visible = true
  289. this.$nextTick(() => {
  290. console.log(this.model)
  291. if (record.advertiserId) {
  292. this.form.setFieldsValue(
  293. pick(
  294. this.model,
  295. 'projectName',
  296. 'industryId',
  297. 'advertiserId',
  298. 'productId',
  299. 'responsibleName',
  300. 'maxBid',
  301. 'maxDeepCpaBid',
  302. 'userId',
  303. 'designResponsibleId',
  304. 'responsibleId',
  305. 'industryCode',
  306. 'supplierCode',
  307. // 'advertiserType',
  308. 'saleId'
  309. )
  310. )
  311. } else {
  312. this.form.setFieldsValue(
  313. pick(
  314. this.model,
  315. 'projectName',
  316. 'industryId',
  317. 'advertiserId',
  318. 'responsibleName',
  319. 'maxBid',
  320. 'maxDeepCpaBid',
  321. 'userId',
  322. 'designResponsibleId',
  323. 'responsibleId',
  324. 'industryCode',
  325. 'supplierCode',
  326. // 'advertiserType',
  327. 'saleId'
  328. )
  329. )
  330. }
  331. // this.resId = record.responsibleId
  332. // this.shejiId = record.designResponsibleId
  333. getAction('/sys/user/getAllUserListV1', '').then((res) => {
  334. console.log(res)
  335. if (res.success) {
  336. this.options = res.result
  337. }
  338. })
  339. getAction('/sys/user/getAllSaleList', '').then((res) => {
  340. console.log(res)
  341. if (res.success) {
  342. this.optionsElse = res.result
  343. }
  344. })
  345. //时间格式化
  346. })
  347. },
  348. close() {
  349. this.$emit('close')
  350. this.visible = false
  351. },
  352. handleOk() {
  353. const that = this
  354. // 触发表单验证
  355. this.form.validateFields((err, values) => {
  356. if (!err) {
  357. that.confirmLoading = true
  358. let httpurl = ''
  359. let method = ''
  360. if (!this.model.id) {
  361. httpurl += this.url.add
  362. method = 'post'
  363. } else {
  364. httpurl += this.url.edit
  365. method = 'put'
  366. }
  367. var data = values.advertiserId
  368. let formData = Object.assign(this.model, values)
  369. // if(this.model.mediaId)
  370. formData.maxBid = formData.maxBid * 1000
  371. formData.maxDeepCpaBid = formData.maxDeepCpaBid * 1000
  372. //时间格式化
  373. // formData.advertiserId = data.key
  374. // formData.advertiserName = data.label
  375. formData.responsibleId = values.responsibleId
  376. formData.designResponsibleId = values.designResponsibleId
  377. formData.userId = formData.userId ? formData.userId : that.userInfo().id
  378. httpAction(httpurl, formData, method)
  379. .then((res) => {
  380. if (res.success) {
  381. that.$message.success(res.message)
  382. that.$emit('ok')
  383. } else {
  384. that.$message.warning(res.message)
  385. }
  386. })
  387. .finally(() => {
  388. that.confirmLoading = false
  389. that.close()
  390. })
  391. }
  392. })
  393. },
  394. handleCancel() {
  395. this.close()
  396. },
  397. getFormFieldValue(field) {
  398. return this.form.getFieldValue(field)
  399. },
  400. get(valueName, key) {
  401. console.log(valueName, key)
  402. this.resId = key
  403. },
  404. },
  405. }
  406. </script>
  407. <style lang="less" scoped></style>