123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412 |
- <template>
- <a-modal
- :title="title"
- :width="800"
- :visible="visible"
- :confirmLoading="confirmLoading"
- @ok="handleOk"
- @cancel="handleCancel"
- cancelText="关闭"
- >
- <a-spin :spinning="confirmLoading">
- <a-form :form="form">
- <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="媒体类型">
- <a-radio-group @change="onChange" v-model="model.mediaId">
- <a-radio-button value="1">头条</a-radio-button>
- <a-radio-button value="2">快手</a-radio-button>
- <a-radio-button value="3">头条内广</a-radio-button>
- <a-radio-button value="4">快手内广</a-radio-button>
- </a-radio-group>
- </a-form-item> -->
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目名称" >
- <a-input placeholder="请输入项目名称" v-decorator="['projectName', validatorRules.projectName]" disabled/>
- </a-form-item>
- <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="行业">
- <j-tree-select ref="treeSelect" placeholder="请选择行业" v-decorator="['industryId']"
- dict="sys_category,name,id" pidField="pid" pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76">
- </j-tree-select>
- </a-form-item>-->
- <a-form-item
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- label="供应商"
- v-if="model.mediaId=='2'||model.mediaId=='4'"
- >
- <a-select
- optionFilterProp="children"
- showSearch
- :filterOption="filterOption"
- v-decorator="['supplierCode', validatorRules.supplierCode]"
- >
- <a-select-option
- :value="item.supplierCode"
- v-for="(item, index) of supplierList"
- :key="index"
- >
- {{
- item.supplierName
- }}
- </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="广告主名称">
- <a-select
- @change="handleChange"
- optionFilterProp="children"
- showSearch
- :filterOption="filterOption"
- v-decorator="['advertiserId', validatorRules.advertiserId]"
- placeholder="请选择广告主"
- disabled
- >
- <a-select-option :value="item.id" v-for="(item, index) of list" :key="index">
- {{
- item.name
- }}
- </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="产品名称">
- <a-select
- optionFilterProp="children"
- showSearch
- :filterOption="filterOption"
- v-decorator="['productId']"
- placeholder="请选择产品"
- disabled
- >
- <a-select-option :value="item.id" v-for="(item, index) of listProduct" :key="index">
- {{
- item.productName
- }}
- </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="最高出价">
- <a-input
- placeholder="请输入最高出价"
- v-decorator="['maxBid', validatorRules.maxBid]"
- addonAfter="元"
- />
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="最高转化出价">
- <a-input placeholder="最高转化出价" v-decorator="['maxDeepCpaBid']" addonAfter="元" />
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售">
- <a-select
- showSearch
- optionFilterProp="children"
- style="width: 100%"
- :filterOption="filterOption"
- v-decorator="['saleId',{ rules: [{ required: true,message: '请选择销售' }] } ]"
- >
- <!-- -->
- <a-select-option
- v-for="appModel in optionsElse"
- :key="appModel.userId + new Date().getTime()"
- :value="appModel.userId"
- >{{ appModel.realName }}  {{ appModel.roleName }}</a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="运营负责人">
- <a-select
- showSearch
- optionFilterProp="children"
- style="width: 100%"
- @focus="handleFocus"
- @blur="handleBlur"
- :filterOption="filterOption"
- v-decorator="['responsibleId', { rules: [{ required: true, message: '请选择运营负责人' }] }]"
- >
- <a-select-option
- v-for="appModel in options"
- :key="appModel.userId + new Date().getTime()"
- :value="appModel.userId"
- >{{ appModel.realName }}  {{ appModel.roleName }}</a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="设计负责人">
- <a-select
- showSearch
- optionFilterProp="children"
- style="width: 100%"
- @focus="handleFocus"
- @blur="handleBlur"
- :filterOption="filterOption"
- v-decorator="['designResponsibleId', { rules: [{ required: true, message: '请选择设计负责人' }] }]"
- >
- <a-select-option
- v-for="appModel in options"
- :key="appModel.userId + new Date().getTime()"
- :value="appModel.userId"
- >{{ appModel.realName }}  {{ appModel.roleName }}</a-select-option>
- </a-select>
- </a-form-item>
- </a-form>
- </a-spin>
- </a-modal>
- </template>
- <script>
- import { httpAction, getAction } from '@/api/manage'
- import pick from 'lodash.pick'
- import moment from 'moment'
- import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
- import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
- import JTreeSelect from '@/components/jeecg/JTreeSelect'
- import { mapGetters } from 'vuex'
- export default {
- name: 'ProjectModal',
- components: {
- JSelectUserByDep,
- JSelectDepart,
- JTreeSelect,
- },
- data() {
- return {
- title: '操作',
- visible: false,
- model: {},
- labelCol: {
- xs: { span: 24 },
- sm: { span: 5 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- industryId: '',
- confirmLoading: false,
- form: this.$form.createForm(this),
- validatorRules: {
- projectName: { rules: [{ required: true, message: '请输入项目名称!' }] },
- industryId: { rules: [{ required: true, message: '请选择行业!' }] },
- advertiserId: { rules: [{ required: true, message: '请选择广告主!' }] },
- productId: { rules: [{ required: true, message: '请选择产品!' }] },
- supplierCode: { rules: [{ required: true, message: '请选择供应商!' }], initialValue: 'kuaishou_001' },
- responsibleName: { rules: [{ required: true, message: '请选择负责人!' }] },
- maxBid: { rules: [{ required: true, message: '请输入最高出价!' }, { validator: this.validateInputCode }] },
- },
- url: {
- add: '/ctop/project/add',
- edit: '/ctop/project/edit',
- getList: '/ctop/advertiser/list',
- },
- list: [],
- listProduct: [],
- resId: '',
- shejiId: '',
- options: [],
- optionsElse: [],
- supplierList: [],
- editAll: false,
- }
- },
- created() {
- this.getSupplierList()
- },
- methods: {
- validateInputCode(rule, value, callback) {
- if (!value || value > 0) {
- callback()
- } else {
- callback('请输入大于0的最高报价!')
- }
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- onChange(e) {
- console.log(`checked = ${e.target.value}`)
- },
- handleChange(value) {
- console.log(value)
- getAction('/ctop/product/list', { advertiserId: value, pageSize: 1000 }).then((res) => {
- if (res.success) {
- this.listProduct = res.result.records
- }
- })
- },
- handleBlur() {
- console.log('blur')
- },
- handleFocus() {
- console.log('focus')
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- getList() {
- var params = {}
- // params.userId = this.userInfo().id
- params.pageSize = 1000
- params.pageNo = 1
- console.log(params)
- getAction(this.url.getList,params)
- .then((res) => {
- if (res.success) {
- console.log(res)
- this.list = res.result.records
- } else {
- this.$message.warning(res.message)
- }
- })
- .finally(() => {})
- },
- getSupplierList() {
- var params = {}
- getAction('/ctop/supplierList/list').then((res) => {
- if (res.success) {
- this.supplierList = res.result.records
- } else {
- this.$message.warning(res.message)
- }
- })
- },
- add(item) {
- this.editAll = false
- this.edit({
- responsibleId: this.userInfo().id, //用户Id
- mediaId: '2',
- ...item,
- })
- },
- edit(record) {
- this.getSupplierList()
- this.getList()
- if (record.advertiserId) {
- this.editAll = true
- getAction('/ctop/product/list', { advertiserId: record.advertiserId, pageSize: 1000 }).then((res) => {
- if (res.success) {
- this.listProduct = res.result.records
- }
- })
- }
- var params = { ...record }
- console.log(record)
- this.form.resetFields()
- this.model = Object.assign({}, params)
- this.model.maxBid = this.model.maxBid ? this.model.maxBid / 1000 : 0
- this.model.maxDeepCpaBid = this.model.maxDeepCpaBid ? this.model.maxDeepCpaBid / 1000 : 0
- this.visible = true
- this.$nextTick(() => {
- console.log(this.model)
- if (record.advertiserId) {
- this.form.setFieldsValue(
- pick(
- this.model,
- 'projectName',
- 'industryId',
- 'advertiserId',
- 'productId',
- 'responsibleName',
- 'maxBid',
- 'maxDeepCpaBid',
- 'userId',
- 'designResponsibleId',
- 'responsibleId',
- 'industryCode',
- 'supplierCode',
- // 'advertiserType',
- 'saleId'
- )
- )
- } else {
- this.form.setFieldsValue(
- pick(
- this.model,
- 'projectName',
- 'industryId',
- 'advertiserId',
- 'responsibleName',
- 'maxBid',
- 'maxDeepCpaBid',
- 'userId',
- 'designResponsibleId',
- 'responsibleId',
- 'industryCode',
- 'supplierCode',
- // 'advertiserType',
- 'saleId'
- )
- )
- }
- // this.resId = record.responsibleId
- // this.shejiId = record.designResponsibleId
- getAction('/sys/user/getAllUserListV1', '').then((res) => {
- console.log(res)
- if (res.success) {
- this.options = res.result
- }
- })
- getAction('/sys/user/getAllSaleList', '').then((res) => {
- console.log(res)
- if (res.success) {
- this.optionsElse = res.result
- }
- })
- //时间格式化
- })
- },
- close() {
- this.$emit('close')
- this.visible = false
- },
- handleOk() {
- const that = this
- // 触发表单验证
- this.form.validateFields((err, values) => {
- if (!err) {
- that.confirmLoading = true
- let httpurl = ''
- let method = ''
- if (!this.model.id) {
- httpurl += this.url.add
- method = 'post'
- } else {
- httpurl += this.url.edit
- method = 'put'
- }
- var data = values.advertiserId
- let formData = Object.assign(this.model, values)
- // if(this.model.mediaId)
- formData.maxBid = formData.maxBid * 1000
- formData.maxDeepCpaBid = formData.maxDeepCpaBid * 1000
- //时间格式化
- // formData.advertiserId = data.key
- // formData.advertiserName = data.label
- formData.responsibleId = values.responsibleId
- formData.designResponsibleId = values.designResponsibleId
- formData.userId = formData.userId ? formData.userId : that.userInfo().id
- httpAction(httpurl, formData, method)
- .then((res) => {
- if (res.success) {
- that.$message.success(res.message)
- that.$emit('ok')
- } else {
- that.$message.warning(res.message)
- }
- })
- .finally(() => {
- that.confirmLoading = false
- that.close()
- })
- }
- })
- },
- handleCancel() {
- this.close()
- },
- getFormFieldValue(field) {
- return this.form.getFieldValue(field)
- },
- get(valueName, key) {
- console.log(valueName, key)
- this.resId = key
- },
- },
- }
- </script>
- <style lang="less" scoped></style>
|