index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="产品名称" prop="productName">
  5. <el-input
  6. v-model="queryParams.productName"
  7. placeholder="请输入产品名称"
  8. clearable
  9. @keyup.enter.native="handleQuery"
  10. />
  11. </el-form-item>
  12. <el-form-item label="地区" prop="area">
  13. <el-input
  14. v-model="queryParams.area"
  15. placeholder="请输入地区"
  16. clearable
  17. @keyup.enter.native="handleQuery"
  18. />
  19. </el-form-item>
  20. <el-form-item>
  21. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  22. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  23. </el-form-item>
  24. </el-form>
  25. <el-row :gutter="10" class="mb8">
  26. <el-col :span="1.5">
  27. <el-button
  28. type="primary"
  29. plain
  30. icon="el-icon-plus"
  31. size="mini"
  32. @click="handleAdd"
  33. v-hasPermi="['jnb:quotations:add']"
  34. >新增
  35. </el-button>
  36. </el-col>
  37. <el-col :span="1.5">
  38. <el-button
  39. type="success"
  40. plain
  41. icon="el-icon-edit"
  42. size="mini"
  43. :disabled="single"
  44. @click="handleUpdate"
  45. v-hasPermi="['jnb:quotations:edit']"
  46. >修改
  47. </el-button>
  48. </el-col>
  49. <el-col :span="1.5">
  50. <el-button
  51. type="danger"
  52. plain
  53. icon="el-icon-delete"
  54. size="mini"
  55. :disabled="multiple"
  56. @click="handleDelete"
  57. v-hasPermi="['jnb:quotations:remove']"
  58. >删除
  59. </el-button>
  60. </el-col>
  61. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  62. </el-row>
  63. <el-table v-loading="loading" :data="quotationsList" @selection-change="handleSelectionChange">
  64. <el-table-column type="selection" width="55" align="center"/>
  65. <el-table-column label="产品名称" align="center" prop="productName"/>
  66. <el-table-column label="地区" align="center" prop="area"/>
  67. <el-table-column label="类型" align="center" prop="type"/>
  68. <el-table-column label="价格" align="center" prop="price"/>
  69. <el-table-column label="地址" align="center" prop="address"/>
  70. <el-table-column label="审核状态" align="center" prop="status"/>
  71. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  72. <template slot-scope="scope">
  73. <el-button
  74. v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
  75. size="mini"
  76. type="text"
  77. icon="el-icon-edit"
  78. @click="updateStatus(scope.row)"
  79. v-hasPermi="['jnb:quotations:edit']"
  80. >审核
  81. </el-button>
  82. <el-button
  83. v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
  84. size="mini"
  85. type="text"
  86. icon="el-icon-edit"
  87. @click="handleUpdate(scope.row)"
  88. v-hasPermi="['jnb:quotations:edit']"
  89. >修改
  90. </el-button>
  91. <el-button
  92. v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
  93. size="mini"
  94. type="text"
  95. icon="el-icon-delete"
  96. @click="handleDelete(scope.row)"
  97. v-hasPermi="['jnb:quotations:remove']"
  98. >删除
  99. </el-button>
  100. <el-button
  101. v-if="scope.row.status === '通过' "
  102. size="mini"
  103. type="text"
  104. icon="el-icon-delete"
  105. @click="handleUpdateStatus(scope.row)"
  106. v-hasPermi="['jnb:quotations:remove']"
  107. >查看
  108. </el-button>
  109. </template>
  110. </el-table-column>
  111. </el-table>
  112. <pagination
  113. :total="total"
  114. :page.sync="queryParams.pageNum"
  115. :limit.sync="queryParams.pageSize"
  116. @pagination="getList"
  117. />
  118. <!-- 添加或修改行情对话框 -->
  119. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  120. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  121. <el-form-item label="产品名称" prop="productName">
  122. <el-input v-model="form.productName" placeholder="请输入产品名称"/>
  123. </el-form-item>
  124. <el-form-item label="类型" prop="type">
  125. <el-cascader
  126. ref="cascader"
  127. v-model="form.type"
  128. :options="options"
  129. :props="{ checkStrictly: true ,emitPath: false, }"
  130. :show-all-levels="false"
  131. clearable>
  132. </el-cascader>
  133. </el-form-item>
  134. <el-form-item label="地区" prop="area">
  135. <el-input v-model="form.area" placeholder="请输入地区"/>
  136. </el-form-item>
  137. <el-form-item label="价格" prop="price">
  138. <el-input v-model="form.price" placeholder="请输入价格" type="number"/>
  139. </el-form-item>
  140. <el-form-item label="手机号" prop="phone">
  141. <el-input v-model="form.phone" placeholder="请输入手机号"/>
  142. </el-form-item>
  143. <el-form-item label="地址" prop="address">
  144. <el-input v-model="form.address" placeholder="请输入地址"/>
  145. </el-form-item>
  146. <el-form-item label="图片" prop="url">
  147. <image-upload v-model="form.url" width="100"/>
  148. </el-form-item>
  149. </el-form>
  150. <div slot="footer" class="dialog-footer" v-if="poppn">
  151. <el-button type="primary" @click="submitForm">确 定</el-button>
  152. <el-button @click="cancel">取 消</el-button>
  153. </div>
  154. </el-dialog>
  155. <el-dialog :title="title" :visible.sync="staK" width="500px" append-to-body>
  156. <el-form ref="forms" :model="forms" :rules="rules" label-width="80px">
  157. <el-form-item label="产品名称" prop="productName">
  158. <el-input v-model="forms.productName" placeholder="请输入产品名称" :disabled="true"/>
  159. </el-form-item>
  160. <el-form-item label="类型" prop="type">
  161. <el-cascader
  162. :disabled="true"
  163. ref="cascader"
  164. v-model="forms.type"
  165. :options="options"
  166. :props="{ checkStrictly: true ,emitPath: false, }"
  167. :show-all-levels="false"
  168. clearable>
  169. </el-cascader>
  170. </el-form-item>
  171. <el-form-item label="地区" prop="area">
  172. <el-input v-model="forms.area" placeholder="请输入地区" :disabled="true"/>
  173. </el-form-item>
  174. <el-form-item label="价格" prop="price">
  175. <el-input v-model="forms.price" placeholder="请输入价格" :disabled="true" type="number"/>
  176. </el-form-item>
  177. <el-form-item label="手机号" prop="phone">
  178. <el-input v-model="forms.phone" placeholder="请输入手机号" :disabled="true"/>
  179. </el-form-item>
  180. <el-form-item label="地址" prop="address">
  181. <el-input v-model="forms.address" placeholder="请输入地址" :disabled="true"/>
  182. </el-form-item>
  183. <el-form-item label="图片" prop="url">
  184. <template slot-scope="slot">
  185. <div v-for="(e,idx) in forms.url" :key="idx" style="display: flex;display: inline-block;justify-content: space-between;width: 120px">
  186. <img :src="urlExcuted(e)" width="200"/>
  187. </div>
  188. </template>
  189. </el-form-item>
  190. </el-form>
  191. <div slot="footer" class="dialog-footer" v-if="poppn" >
  192. <el-button type="primary" @click="submit('1')">通过</el-button>
  193. <el-button type="primary" @click="submit('2')">不通过</el-button>
  194. <el-button @click="cancel">取 消</el-button>
  195. </div>
  196. </el-dialog>
  197. </div>
  198. </template>
  199. <script>
  200. import {
  201. addQuotations,
  202. delQuotations,
  203. getQuotations,
  204. listQuotations,
  205. updateQuotations,
  206. updateStatus
  207. } from "@/api/quotations/quotations";
  208. import {listConfig} from "@/api/quotations/config";
  209. import Img from "@/views/my/jnbImg.vue";
  210. export default {
  211. name: "Quotations",
  212. components: {Img},
  213. data() {
  214. // 数字校验
  215. let validateNumber = (rule, value, callback) => {
  216. const numberReg = /^[0-9]+.?[0-9]*$/;
  217. if (!numberReg.test(value)) {
  218. callback(new Error('请输入数字'));
  219. } else {
  220. callback();
  221. }
  222. }
  223. return {
  224. baseUrl: process.env.VUE_APP_BASE_API,
  225. // 类型下拉框选项
  226. options: [],
  227. // 遮罩层
  228. loading: true,
  229. // 选中数组
  230. ids: [],
  231. // 非单个禁用
  232. single: true,
  233. // 非多个禁用
  234. multiple: true,
  235. // 显示搜索条件
  236. showSearch: true,
  237. // 总条数
  238. total: 0,
  239. // 行情表格数据
  240. quotationsList: [],
  241. // 弹出层标题
  242. title: "",
  243. // 是否显示弹出层
  244. open: false,
  245. staK: false,
  246. // 查询参数
  247. queryParams: {
  248. pageNum: 1,
  249. pageSize: 10,
  250. productName: null,
  251. area: null,
  252. type: null,
  253. price: null,
  254. phone: null,
  255. address: null,
  256. url: null,
  257. urlArray: null
  258. },
  259. // 表单参数
  260. form: {},
  261. //审核参数
  262. forms: {},
  263. poppn: true,
  264. sta: {
  265. status: [{required: true, message: "请选择审核状态", trigger: "blur"}]
  266. },
  267. // 表单校验
  268. rules: {
  269. productName: [{required: true, message: "请输入产品名称", trigger: "blur"}],
  270. area: [{required: true, message: "请输入地区", trigger: "blur"}],
  271. price: [
  272. {required: true, message: "请输入价格", trigger: "blur"},
  273. {validator: validateNumber, trigger: 'blur'}
  274. ],
  275. phone: [{required: true, message: "请输入手机号", trigger: "blur", pattern: /^1[34578]\d{9}$/}],
  276. address: [{required: true, message: "请输入地址", trigger: "blur"}],
  277. url: [{required: true, message: "请输入图片", trigger: "blur"}]
  278. }
  279. };
  280. },
  281. created() {
  282. this.getList();
  283. },
  284. methods: {
  285. urlExcuted(val){
  286. return this.baseUrl + val
  287. },
  288. /** 查询行情列表 */
  289. getList() {
  290. this.loading = true;
  291. listConfig().then(response => {
  292. this.options = this.formatOptions(response.data.quotations);
  293. listQuotations(this.queryParams).then(response => {
  294. this.quotationsList = this.dataFormat(response.rows);
  295. this.quotationsList.url = response.rows.urlArray
  296. this.total = response.total;
  297. this.loading = false;
  298. });
  299. });
  300. },
  301. //转换为下拉选列表
  302. formatOptions(data) {
  303. return data.map(item => ({
  304. value: item.id,
  305. label: item.productName,
  306. children: item.children ? this.formatOptions(item.children) : null,
  307. }));
  308. },
  309. /*
  310. * el-cascader递归获取父级id
  311. * @param list 数据列表
  312. * @param id 后端返回的id
  313. * propsCascader 是el-cascader props属性
  314. **/
  315. getParentsById(list, id) {
  316. for (let item of list) {
  317. let valueKey = this.propsCascader ? this.propsCascader.value : 'value';
  318. if (item[valueKey] == id) {
  319. return [item[valueKey]]
  320. }
  321. if (item.children) {
  322. let node = this.getParentsById(item.children, id)
  323. if (node !== undefined) {
  324. // 追加父节点
  325. node.unshift(item[valueKey])
  326. return node
  327. }
  328. }
  329. }
  330. },
  331. dataFormat(rows) {
  332. // 创建一个映射对象,键是id,值是productName
  333. const idToProductName = this.options.reduce((acc, cur) => {
  334. acc[cur.value] = cur.label;
  335. return acc;
  336. }, {});
  337. return rows.map(item => {
  338. // 使用映射对象将type的值从id转换为productName
  339. item.type = idToProductName[item.type] || item.type;
  340. return item;
  341. });
  342. },
  343. // 取消按钮
  344. cancel() {
  345. this.open = false;
  346. this.staK = false;
  347. this.reset();
  348. },
  349. // 表单重置
  350. reset() {
  351. this.form = {
  352. id: null,
  353. productName: null,
  354. area: null,
  355. type: null,
  356. price: null,
  357. phone: null,
  358. address: null,
  359. url: null,
  360. createBy: null,
  361. createTime: null,
  362. updateBy: null,
  363. updateTime: null,
  364. remark: null,
  365. delFlag: null,
  366. configId: null
  367. };
  368. this.resetForm("form");
  369. this.forms = {
  370. status: null
  371. }
  372. this.resetForm("forms");
  373. },
  374. /** 搜索按钮操作 */
  375. handleQuery() {
  376. this.queryParams.pageNum = 1;
  377. this.getList();
  378. },
  379. /** 重置按钮操作 */
  380. resetQuery() {
  381. this.resetForm("queryForm");
  382. this.handleQuery();
  383. },
  384. // 多选框选中数据
  385. handleSelectionChange(selection) {
  386. this.ids = selection.map(item => item.id)
  387. this.single = selection.length !== 1
  388. this.multiple = !selection.length
  389. },
  390. /** 新增按钮操作 */
  391. handleAdd() {
  392. this.poppn =true;
  393. this.reset();
  394. this.open = true;
  395. this.title = "添加行情";
  396. },
  397. /** 修改按钮操作 */
  398. handleUpdate(row) {
  399. this.reset();
  400. const id = row.id || this.ids
  401. getQuotations(id).then(response => {
  402. this.form = response.data;
  403. this.form.type = this.getParentsById(this.options, this.form.type)
  404. this.open = true;
  405. this.poppn = true;
  406. this.title = "修改行情";
  407. });
  408. },
  409. handleUpdateStatus(row) {
  410. this.reset();
  411. const id = row.id || this.ids
  412. getQuotations(id).then(response => {
  413. this.forms = response.data;
  414. debugger
  415. if (this.forms.url!==""&&this.forms.url!==null){
  416. this.forms.url = this.forms.url.split(',')
  417. }
  418. this.form.type = this.getParentsById(this.options, this.form.type)
  419. this.staK = true;
  420. this.poppn = false;
  421. this.title = "查看行情";
  422. });
  423. },
  424. /** 审核按钮*/
  425. updateStatus(row) {
  426. this.reset();
  427. const id = row.id
  428. getQuotations(id).then(response => {
  429. this.forms = response.data;
  430. if (this.forms.url!==""&&this.forms.url!==null){
  431. this.forms.url = this.forms.url.split(',')
  432. }
  433. this.forms.type = this.getParentsById(this.options, this.forms.type)
  434. this.staK = true;
  435. this.poppn = true;
  436. this.title = "行情审核";
  437. });
  438. },
  439. submit(status) {
  440. // 将createTime转换为Date对象
  441. let date = new Date(this.forms.createTime);
  442. // 使用toLocaleString方法将Date对象转换为"YYYY-MM-DD HH:MM:SS"格式
  443. this.forms.createTime = date.getFullYear() + '-' +
  444. ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
  445. ('0' + date.getDate()).slice(-2) + ' ' +
  446. ('0' + date.getHours()).slice(-2) + ':' +
  447. ('0' + date.getMinutes()).slice(-2) + ':' +
  448. ('0' + date.getSeconds()).slice(-2);
  449. this.forms.status = status;
  450. if (Array.isArray(this.forms.type)) {
  451. this.forms.type = this.forms.type[this.forms.type.length - 1]
  452. }
  453. //提交之前把forms.url数组转换为字符串用,拼接
  454. this.forms.url = this.forms.url.join(',')
  455. updateStatus(this.forms).then(response => {
  456. this.$modal.msgSuccess("修改成功");
  457. this.staK = false;
  458. this.getList();
  459. });
  460. },
  461. /** 提交按钮 */
  462. submitForm() {
  463. this.$refs["form"].validate(valid => {
  464. if (valid) {
  465. if (this.form.id != null) {
  466. //判断this.form.type是否是数组,如果是数组则取数组的最后一个值
  467. if (Array.isArray(this.form.type)) {
  468. this.form.type = this.form.type[this.form.type.length - 1]
  469. }
  470. updateQuotations(this.form).then(response => {
  471. this.$modal.msgSuccess("修改成功");
  472. this.open = false;
  473. this.getList();
  474. });
  475. } else {
  476. addQuotations(this.form).then(response => {
  477. this.$modal.msgSuccess("新增成功");
  478. this.open = false;
  479. this.getList();
  480. });
  481. }
  482. }
  483. });
  484. },
  485. /** 删除按钮操作 */
  486. handleDelete(row) {
  487. const ids = row.id || this.ids;
  488. this.$modal.confirm('是否确认删除所选的数据项?').then(function () {
  489. return delQuotations(ids);
  490. }).then(() => {
  491. this.getList();
  492. this.$modal.msgSuccess("删除成功");
  493. }).catch(() => {
  494. });
  495. },
  496. }
  497. };
  498. </script>