index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="任务" prop="taskCode">
  5. <el-input
  6. v-model="queryParams.taskCode"
  7. placeholder="请输入任务编码"
  8. clearable
  9. @keyup.enter.native="handleQuery"
  10. />
  11. </el-form-item>
  12. <el-form-item>
  13. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  14. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  15. </el-form-item>
  16. </el-form>
  17. <el-table v-loading="loading" :data="behaviorList" height="700px">
  18. <el-table-column label="负责人" align="center" prop="staffName" />
  19. <el-table-column label="行动日期" align="center" prop="time" />
  20. <el-form-item label="行动日期" prop="time">
  21. <el-date-picker clearable
  22. v-model="form.time"
  23. type="date"
  24. value-format="yyyy-MM-dd"
  25. placeholder="请选择行动日期">
  26. </el-date-picker>
  27. </el-form-item>
  28. <el-table-column label="联系人" align="center" prop="linkmanName" />
  29. <el-table-column label="拜访效果" align="center" prop="result" >
  30. <template slot-scope="scope">
  31. <dict-tag :options="dict.type.mk_bo_behavior_res" :value="scope.row.result"/>
  32. </template>
  33. </el-table-column>
  34. <el-table-column label="是否上级协助" align="center" prop="assist" >
  35. <template slot-scope="scope">
  36. <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.assist"/>
  37. </template>
  38. </el-table-column>
  39. <el-table-column show-overflow-tooltip label="协助内容" align="center" prop="assistContent" />
  40. <el-table-column show-overflow-tooltip label="洽谈内容" align="center" prop="content" />
  41. <el-table-column width="150" label="任务编码" align="center" prop="taskCode"/>
  42. <el-table-column label="行动类型" align="center" prop="type">
  43. <template slot-scope="scope">
  44. <dict-tag :options="dict.type.mk_bo_behavior_type" :value="scope.row.type"/>
  45. </template>
  46. </el-table-column>
  47. <el-table-column show-overflow-tooltip label="客户" align="center" prop="customerName"/>
  48. <el-table-column label="拜访目的" align="center" prop="purpose">
  49. <template slot-scope="scope">
  50. <dict-tag :options="dict.type.mk_bo_behavior_goal" :value="scope.row.purpose"/>
  51. </template>
  52. </el-table-column>
  53. <el-table-column show-overflow-tooltip label="销售组织" align="center" prop="salesOrgName"/>
  54. <el-table-column show-overflow-tooltip label="部门" align="center" prop="deptName"/>
  55. <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
  56. <template slot-scope="scope">
  57. <el-button
  58. size="mini"
  59. type="text"
  60. icon="el-icon-view"
  61. @click="handleBrowse(scope.row)"
  62. >查看</el-button>
  63. </template>
  64. </el-table-column>
  65. </el-table>
  66. <pagination
  67. v-show="total>0"
  68. :total="total"
  69. :page.sync="queryParams.pageNum"
  70. :limit.sync="queryParams.pageSize"
  71. @pagination="getList"
  72. />
  73. <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
  74. <el-form ref="form" :model="form" :rules="rules" label-width="80px" :disabled="this.operatingState == 'Browse'">
  75. <el-divider content-position="left">
  76. <dev style="width: 50px; height: 40px; font-size: 18px">基本信息</dev>
  77. </el-divider>
  78. <el-row>
  79. <el-col :span="8">
  80. <el-form-item label="任务" prop="taskId" v-if="!(this.source == 'BoDetails')">
  81. <el-input v-model="form.taskCode" placeholder="请输入任务" :disabled="this.source == 'TaskList'"/>
  82. </el-form-item>
  83. </el-col>
  84. <el-col :span="8">
  85. <el-form-item label="行动类型" prop="type">
  86. <el-select v-model="form.type" placeholder="请输入行动类型">
  87. <el-option
  88. v-for="dict in dict.type.mk_bo_behavior_type"
  89. :key="dict.value"
  90. :label="dict.label"
  91. :value="dict.value"
  92. ></el-option>
  93. </el-select>
  94. </el-form-item>
  95. </el-col>
  96. <el-col :span="8">
  97. <el-form-item label="行动日期" prop="time">
  98. <el-date-picker clearable
  99. v-model="form.time"
  100. type="date"
  101. value-format="yyyy-MM-dd"
  102. placeholder="请选择行动日期">
  103. </el-date-picker>
  104. </el-form-item>
  105. </el-col>
  106. </el-row>
  107. <el-row>
  108. <el-col :span="8">
  109. <el-form-item label="客户" prop="customerName">
  110. <el-input v-model="form.customerName" placeholder="请输入客户" disabled="this.source == 'BoDetails' || this.source == 'TaskList'"/>
  111. </el-form-item>
  112. </el-col>
  113. <el-col :span="8">
  114. <el-form-item label="联系人" prop="linkmanName">
  115. <el-input v-model="form.linkmanName" placeholder="请输入联系人" >
  116. <el-button slot="append" icon="el-icon-more" @click="refereContact"></el-button>
  117. </el-input>
  118. </el-form-item>
  119. </el-col>
  120. <el-col :span="8">
  121. <el-form-item label="拜访目的" prop="purpose">
  122. <el-select v-model="form.purpose" placeholder="请输入拜访目的">
  123. <el-option
  124. v-for="dict in dict.type.mk_bo_behavior_goal"
  125. :key="dict.value"
  126. :label="dict.label"
  127. :value="dict.value"
  128. ></el-option>
  129. </el-select>
  130. </el-form-item>
  131. </el-col>
  132. </el-row>
  133. <el-row>
  134. <el-col :span="8">
  135. <el-form-item label="拜访效果" prop="result">
  136. <el-select v-model="form.result" placeholder="请输入拜访效果">
  137. <el-option
  138. v-for="dict in dict.type.mk_bo_behavior_res"
  139. :key="dict.value"
  140. :label="dict.label"
  141. :value="dict.value"
  142. ></el-option>
  143. </el-select>
  144. </el-form-item>
  145. </el-col>
  146. <el-col :span="8">
  147. <el-form-item label="是否上级协助" prop="assist">
  148. <el-select v-model="form.assist" placeholder="请输入是否上级协助">
  149. <el-option
  150. v-for="dict in dict.type.sys_yes_no"
  151. :key="dict.value"
  152. :label="dict.label"
  153. :value="dict.value"
  154. ></el-option>
  155. </el-select>
  156. </el-form-item>
  157. </el-col>
  158. <el-col :span="8">
  159. <el-form-item label="协助内容" prop="assistContent" v-show="form.assist == 'Y'" :rules="form.assist == 'Y' ? rules.assistContent : [{require: false}]">
  160. <el-input v-model="form.assistContent" placeholder="请输入协助内容" />
  161. </el-form-item>
  162. </el-col>
  163. </el-row>
  164. <el-row>
  165. <el-col :span="6">
  166. <el-form-item label="销售区域" prop="marketingAreaName">
  167. <el-input v-model="form.marketingAreaName" placeholder="请输入销售区域">
  168. <el-button slot="append" icon="el-icon-more" @click="refereSaleaea"></el-button>
  169. </el-input>
  170. </el-form-item>
  171. </el-col>
  172. </el-row>
  173. <el-row>
  174. <el-col :span="8">
  175. <el-form-item label="销售组织" prop="salesOrgName">
  176. <el-input v-model="form.salesOrgName" placeholder="请输入销售组织" :disabled="true"/>
  177. </el-form-item>
  178. </el-col>
  179. <el-col :span="8">
  180. <el-form-item label="部门" prop="deptName">
  181. <el-input v-model="form.deptName" placeholder="请输入部门" :disabled="true"/>
  182. </el-form-item>
  183. </el-col>
  184. <el-col :span="8">
  185. <el-form-item label="负责人" prop="staffName">
  186. <el-input v-model="form.staffName" placeholder="请输入负责人" :disabled="true"/>
  187. </el-form-item>
  188. </el-col>
  189. </el-row>
  190. <el-divider content-position="left">
  191. <dev style="width: 50px; height: 40px; font-size: 18px">跟进内容</dev>
  192. </el-divider>
  193. <el-form-item label="内容" prop="content" >
  194. <el-input
  195. type="textarea"
  196. :rows="2"
  197. maxlength=900
  198. placeholder="填写提示:今天拜访了谁,收集了什么述求,达成了什么结果,下一步计划。"
  199. autosize
  200. v-model="form.content">
  201. </el-input>
  202. </el-form-item>
  203. <el-divider content-position="left">
  204. <dev style="width: 50px; height: 40px; font-size: 18px">照片信息</dev>
  205. </el-divider>
  206. <el-upload
  207. action="actionUrl"
  208. list-type="picture-card"
  209. :on-change="uploadPic"
  210. :on-preview="handlePictureCardPreview"
  211. :on-remove="handleRemove"
  212. :auto-upload="false"
  213. :file-list="fileList"
  214. >
  215. <i class="el-icon-plus"></i>
  216. </el-upload>
  217. <el-dialog :visible.sync="dialogVisible">
  218. <img width="100%" :src="dialogImageUrl" alt="">
  219. </el-dialog>
  220. <div class="md-auditInfo">
  221. <el-divider content-position="left">
  222. <dev style="width: 50px; height: 40px; font-size: 18px">其它信息</dev>
  223. </el-divider>
  224. <el-form :inline="true" label-position="right" :model="form">
  225. <el-row>
  226. <el-col :span="6">
  227. <el-form-item label="创建人">
  228. <el-input v-model="form.createByName" size="small" readonly></el-input>
  229. </el-form-item>
  230. </el-col>
  231. <el-col :span="6">
  232. <el-form-item label="创建时间">
  233. <el-input v-model="form.createTime" size="small" readonly></el-input>
  234. </el-form-item>
  235. </el-col>
  236. <el-col :span="6">
  237. <el-form-item label="修改人">
  238. <el-input v-model="form.updateByName" size="small" readonly></el-input>
  239. </el-form-item>
  240. </el-col>
  241. <el-col :span="6">
  242. <el-form-item label="修改时间">
  243. <el-input v-model="form.updateTime" size="small" readonly></el-input>
  244. </el-form-item>
  245. </el-col>
  246. </el-row>
  247. </el-form>
  248. </div>
  249. </el-form>
  250. <div slot="footer" class="dialog-footer">
  251. <el-button type="primary" @click="submitForm" v-if="this.operatingState != 'Browse'" :disabled="submitButtonEditStatus">确 定</el-button>
  252. <el-button @click="cancel">取 消</el-button>
  253. </div>
  254. </el-dialog>
  255. </div>
  256. </template>
  257. <script>
  258. import { listBehavior, getBehavior} from "@/api/business/spd/bo/behavior";
  259. export default {
  260. name: "Behavior",
  261. dicts: ['mk_bo_behavior_res','mk_bo_behavior_type','sys_yes_no','mk_bo_behavior_goal'],
  262. data() {
  263. return {
  264. // 遮罩层
  265. loading: true,
  266. // 选中数组
  267. ids: [],
  268. // 非单个禁用
  269. single: true,
  270. // 非多个禁用
  271. multiple: true,
  272. // 显示搜索条件
  273. showSearch: true,
  274. // 总条数
  275. total: 0,
  276. // 行动表格数据
  277. behaviorList: [],
  278. // 弹出层标题
  279. title: "",
  280. // 是否显示弹出层
  281. open: false,
  282. // 查询参数
  283. queryParams: {
  284. pageNum: 1,
  285. pageSize: 10,
  286. taskId: null,
  287. type: null,
  288. time: null,
  289. customer: null,
  290. customerName: null,
  291. linkman: null,
  292. linkmanName: null,
  293. purpose: null,
  294. result: null,
  295. assist: null,
  296. assistContent: null,
  297. salesOrg: null,
  298. salesOrgName: null,
  299. dept: null,
  300. deptName: null,
  301. staff: null,
  302. staffName: null,
  303. content: null,
  304. tenantId: null,
  305. revision: null,
  306. },
  307. // 表单参数
  308. form: {},
  309. };
  310. },
  311. created() {
  312. this.getList();
  313. },
  314. methods: {
  315. /** 查询行动列表 */
  316. getList() {
  317. this.loading = true;
  318. listBehavior(this.queryParams).then(response => {
  319. this.behaviorList = response.rows;
  320. this.total = response.total;
  321. this.loading = false;
  322. });
  323. },
  324. /** 查看按钮操作 */
  325. handleBrowse(row) {
  326. this.reset();
  327. const id = row.id || this.ids
  328. getBehavior(id).then(response => {
  329. this.form = response.data;
  330. this.fileList = this.form.behaviorPs;
  331. this.open = true;
  332. this.operatingState = "Browse";
  333. this.title = "基础信息";
  334. });
  335. },
  336. // 取消按钮
  337. cancel() {
  338. this.open = false;
  339. this.reset();
  340. },
  341. // 表单重置
  342. reset() {
  343. this.form = {
  344. id: null,
  345. taskCode: null,
  346. type: null,
  347. time: null,
  348. customer: null,
  349. customerName: null,
  350. linkman: null,
  351. linkmanName: null,
  352. purpose: null,
  353. result: null,
  354. assist: null,
  355. assistContent: null,
  356. salesOrg: null,
  357. salesOrgName: null,
  358. dept: null,
  359. deptName: null,
  360. staff: null,
  361. staffName: null,
  362. content: null,
  363. tenantId: null,
  364. revision: null,
  365. createBy: null,
  366. createTime: null,
  367. updateBy: null,
  368. updateTime: null,
  369. delFlag: null
  370. };
  371. this.resetForm("form");
  372. },
  373. /** 搜索按钮操作 */
  374. handleQuery() {
  375. this.queryParams.pageNum = 1;
  376. this.getList();
  377. },
  378. /** 重置按钮操作 */
  379. resetQuery() {
  380. this.resetForm("queryForm");
  381. this.handleQuery();
  382. },
  383. }
  384. };
  385. </script>