scriptMaterial.vue 35 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151
  1. <style>
  2. #material-card .ant-tabs-tab {
  3. border: 1px solid gainsboro !important;
  4. }
  5. #material-card .ant-tabs-top-bar {
  6. position: relative;
  7. z-index: 100;
  8. }
  9. #material-card .ant-badge-count {
  10. top: -10px;
  11. }
  12. .detail .ant-form-item {
  13. margin-bottom: 10px !important;
  14. }
  15. .role-item .ant-form-item {
  16. margin-bottom: 0;
  17. }
  18. .ant-list-item {
  19. align-items: flex-start;
  20. }
  21. #only-des .ant-list-item-content-single {
  22. justify-content: center;
  23. }
  24. #only-des .ant-comment-content-author {
  25. justify-content: center;
  26. }
  27. .ant-comment-content-author > a,
  28. .ant-comment-content-author > span {
  29. display: contents;
  30. }
  31. </style>
  32. <style lang="scss" scoped>
  33. .script-style span {
  34. display: block;
  35. }
  36. .home-item {
  37. overflow: hidden;
  38. }
  39. @media (min-width: 1024px) {
  40. .home-item {
  41. border-style: solid;
  42. border-width: 1px;
  43. border-color: #e4e4e4;
  44. width: calc(50% - 10px);
  45. padding: 10px;
  46. margin-right: 10px;
  47. margin-bottom: 10px;
  48. display: flex;
  49. align-items: center;
  50. background: #fff;
  51. position: relative;
  52. z-index: 99;
  53. }
  54. }
  55. /*>=1024的设备*/
  56. // @media (min-width: 1100px) {
  57. // .checkbox_item_container {
  58. // width:70%
  59. // }
  60. // } /*>=1100的设备*/
  61. @media (min-width: 1600px) {
  62. .home-item {
  63. border-style: solid;
  64. border-width: 1px;
  65. border-color: #e4e4e4;
  66. width: calc(50% - 10px);
  67. padding: 10px;
  68. margin-right: 10px;
  69. margin-bottom: 10px;
  70. display: flex;
  71. align-items: center;
  72. background: #fff;
  73. position: relative;
  74. z-index: 99;
  75. }
  76. }
  77. /*>=1280的设备*/
  78. // @media (min-width: 1366px) {
  79. // }
  80. // @media (min-width: 1440px) {
  81. // }
  82. // @media (min-width: 1680px) {
  83. // }
  84. @media (min-width: 1920px) {
  85. .home-item {
  86. border-style: solid;
  87. border-width: 1px;
  88. border-color: #e4e4e4;
  89. width: calc(25% - 10px);
  90. padding: 10px;
  91. margin-right: 10px;
  92. margin-bottom: 10px;
  93. display: flex;
  94. align-items: center;
  95. background: #fff;
  96. position: relative;
  97. z-index: 99;
  98. cursor: pointer;
  99. }
  100. }
  101. .actor-photo-list {
  102. display: flex;
  103. padding-left: 0;
  104. li {
  105. width: 25%;
  106. margin: 10px;
  107. position: relative;
  108. height: 250px;
  109. border: 1px solid #f2f2f2;
  110. img,
  111. video {
  112. width: 100%;
  113. margin-top: auto;
  114. margin-bottom: auto;
  115. top: 0;
  116. bottom: 0;
  117. position: absolute;
  118. max-height: 250px;
  119. }
  120. }
  121. }
  122. .home-card {
  123. width: 100%;
  124. overflow: hidden;
  125. padding: 10px 0px;
  126. display: flex;
  127. flex-wrap: wrap;
  128. margin-right: -10px;
  129. .home-right {
  130. width: 100%;
  131. }
  132. .bg:after {
  133. content: '';
  134. width: 110%;
  135. height: 110%;
  136. position: absolute;
  137. left: -5%;
  138. top: -5%;
  139. background: inherit;
  140. filter: blur(10px);
  141. z-index: 2;
  142. }
  143. }
  144. .bh {
  145. height: 60px;
  146. line-height: 30px;
  147. overflow: hidden;
  148. text-overflow: ellipsis;
  149. -webkit-line-clamp: 2;
  150. display: -webkit-box;
  151. -webkit-box-orient: vertical;
  152. }
  153. a {
  154. font-size: 14px;
  155. }
  156. </style>
  157. <template>
  158. <a-card :bordered="false">
  159. <!-- 查询区域 -->
  160. <div class="table-page-search-wrapper">
  161. <a-form layout="inline">
  162. <a-row :gutter="24">
  163. <a-col :md="8" :sm="8">
  164. <a-form-item label="剧本名称">
  165. <a-input placeholder="请输入剧本名称" v-model="queryParam.dramaName"></a-input>
  166. </a-form-item>
  167. </a-col>
  168. <a-col :md="8" :sm="8">
  169. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  170. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  171. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  172. </span>
  173. </a-col>
  174. </a-row>
  175. </a-form>
  176. </div>
  177. <!-- table区域-begin -->
  178. <!-- <div> -->
  179. <!-- 操作按钮区域 -->
  180. <div class="table-operator" style="position:relative;z-index:100">
  181. <a-button type="primary" icon="plus" @click="addScript">新增</a-button>
  182. </div>
  183. <div v-if="dataSource.length > 0">
  184. <div class="home-card">
  185. <div class="home-item" v-for="(items, index) in dataSource" :key="index">
  186. <div class="home-right" @click="showDetail(items)">
  187. <span
  188. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
  189. >
  190. {{ items.dramaName }}
  191. </span>
  192. <div style="display:flex;justify-content:space-between;width:100%;position:relative">
  193. <span>类型:{{ items.category }}</span>
  194. <!-- <span>题材:未设置</span>
  195. <span>时代:未设置</span> -->
  196. </div>
  197. <div class="bh">
  198. 创作者:{{ items.userName }}<br />
  199. {{ items.introduction }}
  200. </div>
  201. <!-- <div class="bh">大纲:无</div>
  202. <div class="bh">字数:0 </div> -->
  203. <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
  204. {{ items.createTime }}
  205. <a style="float:right;" @click.stop="writeScript(items)"> 编写剧本</a>
  206. <a style="float:right;margin-right:15px" @click.stop="editScript(items)"> 基础信息修改</a>
  207. </span>
  208. </div>
  209. </div>
  210. </div>
  211. <a-pagination
  212. size="small"
  213. :showTotal="ipagination.showTotal"
  214. style="float:right"
  215. v-if="dataSource.length > 0"
  216. showQuickJumper
  217. :pageSize.sync="ipagination.pageSize"
  218. :total="ipagination.total"
  219. v-model="ipagination.current"
  220. @change="getDataSource"
  221. />
  222. </div>
  223. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  224. <img
  225. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
  226. alt="" v-if="!loading"/>
  227. <img
  228. v-else
  229. src="./loading.gif"
  230. />
  231. </div>
  232. <a-modal
  233. :title="add ? '添加素材' : '修改'"
  234. v-model="visible"
  235. @cancel="close"
  236. @afterClose="close"
  237. :maskClosable="false"
  238. :width="800"
  239. >
  240. <template slot="footer">
  241. <a-button key="back" @click="close">取消</a-button>
  242. <a-button key="submit" type="primary" @click="handleOk">
  243. 确定
  244. </a-button>
  245. </template>
  246. <a-form :form="form">
  247. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剧本名称">
  248. <a-input v-decorator="['dramaName', { rules: [{ required: true, message: '请输入剧本名称' }] }]" />
  249. </a-form-item>
  250. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="场景">
  251. <a-input v-decorator="['scnece', { rules: [{ required: true, message: '请输入场景' }] }]" />
  252. </a-form-item>
  253. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="时长">
  254. <a-input v-decorator="['timeLong']" addonAfter="秒" />
  255. </a-form-item>
  256. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频类型">
  257. <a-select v-decorator="['videoType', { rules: [{ required: true, message: '请选择视频类型' }] }]">
  258. <a-select-option value="horizontal">横版</a-select-option>
  259. <a-select-option value="vertical">竖版</a-select-option>
  260. </a-select>
  261. </a-form-item>
  262. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="演员">
  263. <a-select mode="multiple" v-decorator="['actorId', { rules: [{ required: true, message: '请选择演员' }] }]">
  264. <a-select-option v-for="(item, index) of actorList" :key="index" :value="item.id + ''">{{
  265. item.name
  266. }}</a-select-option>
  267. </a-select>
  268. </a-form-item>
  269. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="卖点">
  270. <a-input v-decorator="['usp', { rules: [{ required: true, message: '请输入卖点' }] }]" />
  271. </a-form-item>
  272. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="服装备注">
  273. <a-input v-decorator="['actorRemark']" />
  274. </a-form-item>
  275. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄要求">
  276. <a-input v-decorator="['shootReq']" />
  277. </a-form-item>
  278. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="封面文案">
  279. <a-input v-decorator="['coverText']" />
  280. </a-form-item>
  281. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑备注">
  282. <a-input v-decorator="['clipRemark']" />
  283. </a-form-item>
  284. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="行业类型">
  285. <j-tree-select
  286. ref="treeSelect"
  287. placeholder="请选择行业"
  288. v-decorator="['category', { rules: [{ required: true, message: '请选择行业' }] }]"
  289. dict="sys_category,name,id"
  290. pidField="pid"
  291. pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
  292. >
  293. </j-tree-select>
  294. </a-form-item>
  295. <a-form-item
  296. :label-col="labelCol"
  297. :wrapper-col="{
  298. xs: { span: 24 },
  299. sm: { span: 18 }
  300. }"
  301. label="标签"
  302. >
  303. <template v-for="(tag, index) in tags">
  304. <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
  305. <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
  306. {{ `${tag.slice(0, 20)}...` }}
  307. </a-tag>
  308. </a-tooltip>
  309. <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
  310. {{ tag }}
  311. </a-tag>
  312. </template>
  313. <a-input
  314. v-if="inputVisible"
  315. ref="input"
  316. type="text"
  317. size="small"
  318. :style="{ width: '78px' }"
  319. :value="inputValue"
  320. @change="handleInputChange"
  321. @blur="handleInputConfirm"
  322. @keyup.enter="handleInputConfirm"
  323. />
  324. <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
  325. <a-icon type="plus" /> New Tag
  326. </a-tag>
  327. </a-form-item>
  328. <a-form-item
  329. :label-col="labelCol"
  330. :wrapper-col="{
  331. xs: { span: 24 },
  332. sm: { span: 12 }
  333. }"
  334. label="描述"
  335. >
  336. <a-textarea
  337. placeholder="请输入描述"
  338. v-decorator="[
  339. 'introduction' // 给表单赋值或拉取表单时,该input对应的key
  340. ]"
  341. :autosize="{ minRows: 3, maxRows: 10 }"
  342. />
  343. </a-form-item>
  344. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否公用">
  345. <a-radio-group
  346. v-decorator="[
  347. 'nonpublic',
  348. { initialValue: 0 } // 给表单赋值或拉取表单时,该input对应的key
  349. ]"
  350. >
  351. <a-radio-button :value="0">
  352. </a-radio-button>
  353. <a-radio-button :value="1">
  354. </a-radio-button>
  355. </a-radio-group>
  356. </a-form-item>
  357. </a-form>
  358. </a-modal>
  359. <a-modal title="脚本内容" v-model="visibleScript" :maskClosable="false" :width="900" class="role-item">
  360. <template slot="footer">
  361. <a-button key="back" @click="closeScript">取消</a-button>
  362. <a-button key="submit" type="primary" @click="handleOkScript">
  363. 确定
  364. </a-button>
  365. </template>
  366. <a-list v-if="comments.length" :dataSource="comments" itemLayout="horizontal">
  367. <a-list-item slot="renderItem" slot-scope="item, index" v-if="item.author == '情节描述'" id="only-des">
  368. <a-comment :author="item.author">
  369. <p slot="content">
  370. <span v-if="item.plainSeq">顺序类型:{{ item.plainSeq | plainSeqName }}</span
  371. ><br />
  372. <span v-if="item.content">描述:{{ item.content }}</span
  373. ><br />
  374. <span v-if="item.scene" style="margin-right:15px">镜头:{{ item.scene }}</span
  375. ><br />
  376. <span v-if="item.picContent" style="margin-right:15px">画面内容:{{ item.picContent }}</span
  377. ><br />
  378. <span v-if="item.clipRemark">剪辑备注:{{ item.clipRemark }}</span>
  379. </p>
  380. </a-comment>
  381. <a slot="actions" @click="editAction(item, index)">修改</a>
  382. <a-divider type="vertical" />
  383. <a slot="actions" @click="deleteAction(item, index)">删除</a>
  384. </a-list-item>
  385. <a-list-item slot="renderItem" slot-scope="item" v-else>
  386. <a-comment :avatar="item.avatar">
  387. <p slot="author">
  388. <span v-if="item.plainSeq">顺序类型:{{ item.plainSeq | plainSeqName }}</span
  389. ><br />
  390. <span v-if="item.scene" style="margin-right:15px">镜头:{{ item.scene }}</span
  391. ><br />
  392. <span v-if="item.picContent" style="margin-right:15px">画面内容:{{ item.picContent }}</span
  393. ><br />
  394. <span v-if="item.clipRemark">剪辑备注:{{ item.clipRemark }}</span>
  395. </p>
  396. <span slot="content">
  397. {{ item.author }}:
  398. {{ item.content }}
  399. </span>
  400. </a-comment>
  401. <a slot="actions" @click="editAction(item, index)">修改</a>
  402. <a-divider type="vertical" />
  403. <a slot="actions" @click="deleteAction(item, index)">删除</a>
  404. </a-list-item>
  405. </a-list>
  406. <a-comment>
  407. <div slot="avatar">
  408. <a-cascader v-model="author" :options="options" @change="getAuthor" :defaultValue="['scence']" />
  409. </div>
  410. <div slot="content" v-if="!repeat">
  411. <a-form-item
  412. label="排序"
  413. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  414. :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
  415. v-if="scriptEdit"
  416. >
  417. <a-input v-model="rank"></a-input>
  418. </a-form-item>
  419. <a-form-item
  420. label="顺序类型"
  421. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  422. :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
  423. >
  424. <a-select v-model="plainSeq" style="width:100%">
  425. <a-select-option :value="1">前3s,创意引入,包袱</a-select-option>
  426. <a-select-option :value="2">产品卖点罗列、录屏</a-select-option>
  427. <a-select-option :value="3">反转</a-select-option>
  428. <a-select-option :value="4">尾帧:引导下载,落版海报</a-select-option>
  429. </a-select>
  430. </a-form-item>
  431. <a-form-item
  432. label="镜头"
  433. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  434. :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
  435. >
  436. <a-input v-model="scene"></a-input>
  437. </a-form-item>
  438. <a-form-item
  439. label="画面内容"
  440. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  441. :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
  442. >
  443. <a-input v-model="picContent"></a-input>
  444. </a-form-item>
  445. <a-form-item
  446. label="描述"
  447. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  448. :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
  449. >
  450. <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
  451. </a-form-item>
  452. <a-form-item
  453. label="剪辑备注"
  454. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  455. :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
  456. >
  457. <a-input v-model="clipRemark"></a-input>
  458. </a-form-item>
  459. <a-form-item>
  460. <a-button htmlType="submit" :loading="submitting" @click="handleSubmit" type="primary">
  461. 添加对话
  462. </a-button>
  463. </a-form-item>
  464. </div>
  465. </a-comment>
  466. <a-form :form="formRole" v-if="repeat" :hideRequiredMark="true">
  467. <a-row :gutter="24" style="border-bottom:1px solid #f2f2f2">
  468. <a-col :span="6">
  469. <a-form-item
  470. :label-col="{ xs: { span: 24 }, sm: { span: 6 } }"
  471. :wrapper-col="{ xs: { span: 24 }, sm: { span: 18 } }"
  472. label="姓名"
  473. >
  474. <a-input
  475. placeholder="请输入姓名"
  476. v-decorator="[
  477. 'name',
  478. { rules: [{ required: true, message: '请输入姓名!' }] } // 给表单赋值或拉取表单时,该input对应的key
  479. ]"
  480. />
  481. </a-form-item>
  482. <a-form-item
  483. :label-col="{ xs: { span: 24 }, sm: { span: 6 } }"
  484. :wrapper-col="{ xs: { span: 24 }, sm: { span: 18 } }"
  485. label="性别"
  486. >
  487. <a-select
  488. v-decorator="[
  489. 'sex' // 给表单赋值或拉取表单时,该input对应的key
  490. ]"
  491. >
  492. <a-select-option :value="1">男</a-select-option>
  493. <a-select-option :value="2">女</a-select-option>
  494. </a-select>
  495. </a-form-item>
  496. </a-col>
  497. <a-col :span="18">
  498. <a-form-item
  499. :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
  500. :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
  501. label="角色描述"
  502. >
  503. <a-textarea
  504. placeholder="请输入描述"
  505. v-decorator="[
  506. 'introduction' // 给表单赋值或拉取表单时,该input对应的key
  507. ]"
  508. :autosize="{ minRows: 3, maxRows: 10 }"
  509. />
  510. </a-form-item>
  511. </a-col>
  512. </a-row>
  513. <a-row>
  514. <a-col :span="24" :style="{ textAlign: 'right' }">
  515. <a-button type="primary" @click="handleOkRole">
  516. 添加角色
  517. </a-button>
  518. </a-col>
  519. </a-row>
  520. </a-form>
  521. </a-modal>
  522. <a-modal title="内容展示" v-model="visibleScriptShow" :footer="null" :width="800" class="role-item">
  523. <div id="printTest" v-if="inforDetail">
  524. <a-button v-print="'#printTest'" type="primary" style="float: right;">
  525. 打印
  526. </a-button>
  527. <h3 style="text-align:center">{{ inforDetail.dramaName }}</h3>
  528. <a-row>
  529. <a-col :span="8" v-if="inforDetail.category">类型:{{ inforDetail.category }}</a-col>
  530. <a-col :span="8" v-if="inforDetail.userName">创作者:{{ inforDetail.userName }}</a-col>
  531. <a-col :span="8" v-if="inforDetail.usp"> 卖点:{{ inforDetail.usp }}</a-col>
  532. </a-row>
  533. <a-row>
  534. <a-col :span="8" v-if="inforDetail.scnece">场景:{{ inforDetail.scnece }}</a-col>
  535. <a-col :span="8" v-if="inforDetail.videoType">
  536. 视频类型:{{ inforDetail.videoType == 'horizontal' ? '横板' : '竖版' }}</a-col
  537. >
  538. <a-col :span="8" v-if="inforDetail.timeLong"> 时长:{{ inforDetail.timeLong }}秒</a-col>
  539. </a-row>
  540. <a-row v-if="inforDetail.actorId">
  541. <a-col :span="24"
  542. >演员:<span style="margin-right:15px" v-for="item of inforDetail.actorId.split(',')" :key="item">
  543. {{ actorName(item) }}
  544. </span>
  545. </a-col>
  546. </a-row>
  547. <a-row>
  548. <a-col :span="8" v-if="inforDetail.actorRemark">服装备注:{{ inforDetail.actorRemark }}</a-col>
  549. <a-col :span="16" v-if="inforDetail.shootReq">拍摄要求:{{ inforDetail.shootReq }}</a-col>
  550. </a-row>
  551. <a-row>
  552. <a-col :span="24" v-if="inforDetail.coverText"> 封面文案:{{ inforDetail.coverText }}</a-col>
  553. </a-row>
  554. <a-row style="margin-bottom:15px">
  555. <a-col :span="24" v-if="inforDetail.clipRemark"> 剪辑备注:{{ inforDetail.clipRemark }}</a-col>
  556. </a-row>
  557. <div v-if="one.length > 0" style="border-bottom:1px solid black">
  558. <h3 style="text-align:center">前3s,创意引入,包袱</h3>
  559. <P
  560. v-for="(item, index) of one"
  561. :key="index"
  562. class="script-style"
  563. style="font-size:16px;"
  564. >
  565. <span v-if="item.scene" style="margin-right:15px;">镜头:{{ item.scene }}</span>
  566. <span v-if="item.picContent" style="margin-right:15px;">画面内容:{{ item.picContent }}</span>
  567. <span v-if="item.clipRemark">剪辑备注:{{ item.clipRemark }} </span>
  568. <span style="display:inline-block;margin-top:5px;font-weight:700">{{
  569. item.author == '情节描述' ? '' : item.author + ':'
  570. }}</span>
  571. {{ item.author == '情节描述' ? '【' + item.content + '】' : item.content }}
  572. </P>
  573. </div>
  574. <div v-if="two.length > 0">
  575. <h5 style="text-align:center">产品卖点罗列、录屏</h5>
  576. </div>
  577. <div v-if="three.length > 0">
  578. <h5 style="text-align:center">反转</h5>
  579. </div>
  580. <div v-if="four.length > 0">
  581. <h5 style="text-align:center">引导下载,落版海报</h5>
  582. </div>
  583. </div>
  584. </a-modal>
  585. </a-card>
  586. </template>
  587. <script>
  588. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  589. import JEllipsis from '@/components/jeecg/JEllipsis'
  590. import UploadToAli from '@femessage/upload-to-ali'
  591. import { getAction, postAction, postFile, deleteAction } from '@/api/manage'
  592. import qs from 'qs'
  593. import { mapGetters } from 'vuex'
  594. import moment from 'moment'
  595. import JTreeSelect from '@/components/jeecg/JTreeSelect'
  596. import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
  597. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
  598. export default {
  599. name: 'YardList',
  600. mixins: [JeecgListMixin],
  601. components: {
  602. JEllipsis,
  603. UploadToAli,
  604. selectTable,
  605. JTreeSelect
  606. },
  607. data() {
  608. return {
  609. author: ['scence'],
  610. comments: [],
  611. roleList: [],
  612. actorList: [],
  613. submitting: false,
  614. value: '',
  615. rank: '',
  616. scriptEdit: null,
  617. scene: '',
  618. clipRemark: '',
  619. picContent: '',
  620. projectId: '',
  621. plainSeq: '1',
  622. inputVisible: false,
  623. visibleScript: false,
  624. visibleScriptShow: false,
  625. visibleRole: false,
  626. inputValue: '',
  627. options: [
  628. {
  629. value: 'scence',
  630. label: '情节描述'
  631. },
  632. {
  633. value: 'taici',
  634. label: '台词',
  635. children: []
  636. },
  637. {
  638. value: 'createRole',
  639. label: '新建角色'
  640. }
  641. ],
  642. labelCol: {
  643. xs: {
  644. span: 24
  645. },
  646. sm: {
  647. span: 5
  648. }
  649. },
  650. wrapperCol: {
  651. xs: {
  652. span: 24
  653. },
  654. sm: {
  655. span: 12
  656. }
  657. },
  658. noImgUrl: require('@/assets/img/noImg.png'),
  659. queryParam: {},
  660. dataElse: [],
  661. show: true,
  662. visible: false,
  663. visibleDetail: false,
  664. url: {
  665. list: '/ctop/dramaInfo/list'
  666. },
  667. detail: false,
  668. form: this.$form.createForm(this),
  669. formRole: this.$form.createForm(this),
  670. listData: [],
  671. tags: [],
  672. name: '',
  673. detail: null,
  674. add: true,
  675. id: '',
  676. key: '0',
  677. mediaId: null,
  678. sizeType: [],
  679. size: 4,
  680. repeat: false,
  681. excellent: 0,
  682. code: '',
  683. dramaId: null,
  684. inforDetail: null,
  685. one: [],
  686. two: [],
  687. three: [],
  688. four: []
  689. }
  690. },
  691. filters: {
  692. getDate(value) {
  693. let date = new Date(value)
  694. let y = date.getFullYear()
  695. let MM = date.getMonth() + 1
  696. MM = MM < 10 ? '0' + MM : MM
  697. let d = date.getDate()
  698. d = d < 10 ? '0' + d : d
  699. return y + '-' + MM + '-' + d
  700. },
  701. plainSeqName(value) {
  702. var data = {
  703. 1: '前3s,创意引入,包袱',
  704. 2: '产品卖点罗列、录屏',
  705. 3: '反转',
  706. 4: '尾帧:引导下载,落版海报'
  707. }
  708. return data[value]
  709. }
  710. },
  711. computed: {},
  712. created() {
  713. this.ipagination.pageSize = 8
  714. this.getActor()
  715. },
  716. watch: {},
  717. methods: {
  718. actorName(actorId) {
  719. var data = this.actorList.filter(item => {
  720. return item.id == actorId
  721. })
  722. return data[0].name
  723. },
  724. addScript() {
  725. this.visible = true
  726. this.confirmLoading = false
  727. this.form.resetFields()
  728. this.tags = []
  729. this.getActor()
  730. },
  731. deleteAction(item, index) {
  732. postAction('/ctop/dramaItemInfo/delete', { id: item.id }).then(res => {
  733. if (res.success) {
  734. this.comments.splice(index, 1)
  735. }
  736. })
  737. },
  738. editAction(item, index) {
  739. console.log(item, index)
  740. this.scriptEdit = item.id
  741. this.plainSeq = item.plainSeq
  742. this.rank = item.rank
  743. this.scene = item.scene
  744. this.value = item.line
  745. this.clipRemark = item.clipRemark
  746. this.picContent = item.picContent
  747. this.author = item.type == 1 ? ['scence'] : ['taici', item.roleId]
  748. // line: this.value,
  749. // scene: this.scene,
  750. // clipRemark: this.clipRemark,
  751. // picContent: this.picContent,
  752. // type: this.author[0] == 'scence' ? 1 : 2,
  753. // roleId: this.author[0] == 'scence' ? null : this.author[1]
  754. // postAction('/ctop/dramaItemInfo/edit', { id: item.id }).then(res => {
  755. // if (res.success) {
  756. // this.comments.splice(index, 1)
  757. // }
  758. // })
  759. },
  760. getActor() {
  761. getAction('/ctop/actor/list', { column: 'createTime', order: 'desc', pageNo: 1, pageSize: 1000 }).then(res => {
  762. console.log(res)
  763. if (res.success) {
  764. this.actorList = res.result.records
  765. }
  766. })
  767. },
  768. showDetail(item) {
  769. this.visibleScriptShow = true
  770. this.inforDetail = item
  771. getAction('/ctop/dramaInfo/detail', { dramaId: item.id }).then(res => {
  772. console.log(res)
  773. if (res.success) {
  774. this.comments = res.itemInfos.map(v => {
  775. return {
  776. ...v,
  777. author: v.type == 1 ? '情节描述' : v.roleName,
  778. avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  779. content: v.line,
  780. edit: false
  781. }
  782. })
  783. this.one = this.comments.filter(v => {
  784. return v.plainSeq == 1
  785. })
  786. this.two = this.comments.filter(v => {
  787. return v.plainSeq == 2
  788. })
  789. this.three = this.comments.filter(v => {
  790. return v.plainSeq == 3
  791. })
  792. this.four = this.comments.filter(v => {
  793. return v.plainSeq == 4
  794. })
  795. this.roleList = res.roleInfos
  796. this.options = [
  797. {
  798. value: 'scence',
  799. label: '情节描述'
  800. },
  801. {
  802. value: 'taici',
  803. label: '台词',
  804. children: res.roleInfos.map(item => {
  805. return {
  806. value: item.id,
  807. label: item.name
  808. }
  809. })
  810. },
  811. {
  812. value: 'createRole',
  813. label: '新建角色'
  814. }
  815. ]
  816. }
  817. })
  818. },
  819. getAuthor(e) {
  820. console.log(e)
  821. if (e[0] == 'createRole') {
  822. // this.author = []
  823. this.repeat = true
  824. } else {
  825. this.repeat = false
  826. }
  827. },
  828. handleSubmit() {
  829. if (!this.value) {
  830. return
  831. }
  832. this.submitting = true
  833. if (this.scriptEdit) {
  834. postAction('/ctop/dramaItemInfo/edit', {
  835. id: this.scriptEdit,
  836. line: this.value,
  837. scene: this.scene,
  838. clipRemark: this.clipRemark,
  839. picContent: this.picContent,
  840. type: this.author[0] == 'scence' ? 1 : 2,
  841. rank: this.rank,
  842. plainSeq: this.plainSeq,
  843. roleId: this.author[0] == 'scence' ? null : this.author[1]
  844. }).then(res => {
  845. if (res.success) {
  846. this.scriptEdit = null
  847. this.submitting = false
  848. this.value = ''
  849. this.scene = ''
  850. this.clipRemark = ''
  851. this.picContent = ''
  852. this.getDetailList(this.dramaId)
  853. }
  854. })
  855. } else {
  856. postAction('/ctop/dramaItemInfo/add', {
  857. dramaId: this.dramaId,
  858. line: this.value,
  859. scene: this.scene,
  860. clipRemark: this.clipRemark,
  861. picContent: this.picContent,
  862. plainSeq: this.plainSeq,
  863. type: this.author[0] == 'scence' ? 1 : 2,
  864. roleId: this.author[0] == 'scence' ? null : this.author[1]
  865. }).then(res => {
  866. console.log(res)
  867. this.submitting = false
  868. if (res.success) {
  869. this.comments = [
  870. ...this.comments,
  871. {
  872. author:
  873. this.author[0] == 'scence'
  874. ? '情节描述'
  875. : this.roleList.filter(v => {
  876. return v.id == this.author[1]
  877. })[0].name,
  878. avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  879. content: this.value,
  880. scene: this.scene,
  881. clipRemark: this.clipRemark,
  882. picContent: this.picContent,
  883. datetime: moment().fromNow(),
  884. edit: false
  885. }
  886. ]
  887. this.value = ''
  888. this.scene = ''
  889. this.clipRemark = ''
  890. this.picContent = ''
  891. } else {
  892. this.$message.error('添加失败')
  893. }
  894. })
  895. }
  896. // setTimeout(() => {
  897. // }, 1000)
  898. },
  899. handleChange(e) {
  900. this.value = e.target.value
  901. },
  902. writeScript(item) {
  903. this.visibleScript = true
  904. this.dramaId = item.id
  905. // this.author = 'scence'
  906. this.getDetailList(item.id)
  907. },
  908. getDetailList(id) {
  909. getAction('/ctop/dramaInfo/detail', { dramaId: id }).then(res => {
  910. console.log(res)
  911. if (res.success) {
  912. this.comments = res.itemInfos.map(v => {
  913. return {
  914. ...v,
  915. author: v.type == '1' ? '情节描述' : v.roleName,
  916. avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  917. content: v.line,
  918. scene: v.scene,
  919. clipRemark: v.clipRemark,
  920. picContent: v.picContent,
  921. edit: false
  922. }
  923. })
  924. this.roleList = res.roleInfos
  925. this.options = [
  926. {
  927. value: 'scence',
  928. label: '情节描述'
  929. },
  930. {
  931. value: 'taici',
  932. label: '台词',
  933. children: res.roleInfos.map(item => {
  934. return {
  935. value: item.id,
  936. label: item.name
  937. }
  938. })
  939. },
  940. {
  941. value: 'createRole',
  942. label: '新建角色'
  943. }
  944. ]
  945. }
  946. })
  947. },
  948. getRoleList() {
  949. getAction('/ctop/dramaInfo/detail', { dramaId: this.dramaId }).then(res => {
  950. if (res.success) {
  951. this.roleList = res.roleInfos
  952. this.options = [
  953. {
  954. value: 'scence',
  955. label: '情节描述'
  956. },
  957. {
  958. value: 'taici',
  959. label: '台词',
  960. children: res.roleInfos.map(item => {
  961. return {
  962. value: item.id,
  963. label: item.name
  964. }
  965. })
  966. },
  967. {
  968. value: 'createRole',
  969. label: '新建角色'
  970. }
  971. ]
  972. }
  973. })
  974. },
  975. handleOkRole() {
  976. this.formRole.validateFieldsAndScroll((err, values) => {
  977. if (err) {
  978. // 这里做逻辑处理
  979. } else {
  980. var params = { ...values, dramaId: this.dramaId }
  981. postAction('/ctop/dramaRoleInfo/add', params).then(res => {
  982. if (res.success) {
  983. this.getRoleList()
  984. }
  985. })
  986. // this.listData.push({ name: values.name, sex: values.sex, introduction: values.introduction })
  987. this.formRole.resetFields()
  988. }
  989. })
  990. },
  991. handleInputConfirm() {
  992. const inputValue = this.inputValue
  993. let tags = this.tags
  994. if (inputValue && tags.indexOf(inputValue) === -1) {
  995. tags = [...tags, inputValue]
  996. }
  997. Object.assign(this, {
  998. tags,
  999. inputVisible: false,
  1000. inputValue: ''
  1001. })
  1002. },
  1003. close() {
  1004. this.scriptEdit = null
  1005. this.submitting = false
  1006. this.value = ''
  1007. this.scene = ''
  1008. this.clipRemark = ''
  1009. this.picContent = ''
  1010. },
  1011. showInput() {
  1012. this.inputVisible = true
  1013. this.$nextTick(function() {
  1014. this.$refs.input.focus()
  1015. })
  1016. },
  1017. onChange() {},
  1018. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  1019. searchRe() {
  1020. this.queryParam.projectId = ''
  1021. if (this.queryParam.createTime) {
  1022. this.queryParam.createTime = ''
  1023. }
  1024. this.loadData(1)
  1025. },
  1026. handleClose(removedTag) {
  1027. const tags = this.tags.filter(tag => tag !== removedTag)
  1028. this.tags = tags
  1029. },
  1030. handleInputChange(e) {
  1031. this.inputValue = e.target.value
  1032. },
  1033. handleOkScript() {
  1034. this.visibleScript = false
  1035. },
  1036. closeScript() {
  1037. this.visibleScript = false
  1038. this.comments = []
  1039. },
  1040. editScript(item) {
  1041. // this.getActor()
  1042. this.visible = true
  1043. this.add = false
  1044. this.id = item.id
  1045. this.$nextTick(() => {
  1046. this.form.setFieldsValue({
  1047. actorId: item.actorId.split(','),
  1048. actorRemark: item.actorRemark,
  1049. category: item.category,
  1050. clipRemark: item.clipRemark,
  1051. coverText: item.coverText,
  1052. dramaName: item.dramaName,
  1053. introduction: item.introduction,
  1054. nonpublic: item.nonpublic,
  1055. scnece: item.scnece,
  1056. shootReq: item.shootReq,
  1057. usp: item.usp,
  1058. videoType: item.videoType,
  1059. timeLong: item.timeLong
  1060. })
  1061. })
  1062. this.tags = item.tag.split(',')
  1063. },
  1064. handleOk() {
  1065. this.form.validateFieldsAndScroll((err, values) => {
  1066. if (err) {
  1067. // 这里做逻辑处理
  1068. } else {
  1069. var params = { ...values }
  1070. params.tag = this.tags.join()
  1071. params.actorId = params.actorId.join()
  1072. if (this.add) {
  1073. postAction('/ctop/dramaInfo/add', params).then(res => {
  1074. if (res.success) {
  1075. this.form.resetFields()
  1076. this.tags = []
  1077. this.loadData()
  1078. this.visible = false
  1079. this.add = true
  1080. } else {
  1081. this.$message.error(res.message)
  1082. }
  1083. })
  1084. } else {
  1085. params.id = this.id
  1086. postAction('/ctop/dramaInfo/edit', params).then(res => {
  1087. if (res.success) {
  1088. this.form.resetFields()
  1089. this.tags = []
  1090. this.loadData()
  1091. this.visible = false
  1092. this.add = true
  1093. } else {
  1094. this.$message.error(res.message)
  1095. }
  1096. })
  1097. }
  1098. }
  1099. })
  1100. },
  1101. getDataSource(page, pageSize) {
  1102. this.ipagination.current = page
  1103. this.loadData()
  1104. },
  1105. getData(className) {
  1106. return this.form.getFieldValue(className)
  1107. }
  1108. }
  1109. }
  1110. </script>
  1111. <style scoped>
  1112. @import '~@assets/less/common.less';
  1113. </style>