123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509 |
- <template>
- <div class="app-container">
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
- <el-form-item label="产品名称" prop="productName">
- <el-input
- v-model="queryParams.productName"
- placeholder="请输入产品名称"
- clearable
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="地区" prop="area">
- <el-input
- v-model="queryParams.area"
- placeholder="请输入地区"
- clearable
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button
- type="primary"
- plain
- icon="el-icon-plus"
- size="mini"
- @click="handleAdd"
- v-hasPermi="['jnb:quotations:add']"
- >新增
- </el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="success"
- plain
- icon="el-icon-edit"
- size="mini"
- :disabled="single"
- @click="handleUpdate"
- v-hasPermi="['jnb:quotations:edit']"
- >修改
- </el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="danger"
- plain
- icon="el-icon-delete"
- size="mini"
- :disabled="multiple"
- @click="handleDelete"
- v-hasPermi="['jnb:quotations:remove']"
- >删除
- </el-button>
- </el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
- <el-table v-loading="loading" :data="quotationsList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center"/>
- <el-table-column label="产品名称" align="center" prop="productName"/>
- <el-table-column label="地区" align="center" prop="area"/>
- <el-table-column label="类型" align="center" prop="type"/>
- <el-table-column label="价格" align="center" prop="price"/>
- <el-table-column label="地址" align="center" prop="address"/>
- <el-table-column label="审核状态" align="center" prop="status"/>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
- <template slot-scope="scope">
- <el-button
- v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
- size="mini"
- type="text"
- icon="el-icon-edit"
- @click="updateStatus(scope.row)"
- v-hasPermi="['jnb:quotations:edit']"
- >审核
- </el-button>
- <el-button
- v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
- size="mini"
- type="text"
- icon="el-icon-edit"
- @click="handleUpdate(scope.row)"
- v-hasPermi="['jnb:quotations:edit']"
- >修改
- </el-button>
- <el-button
- v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click="handleDelete(scope.row)"
- v-hasPermi="['jnb:quotations:remove']"
- >删除
- </el-button>
- <el-button
- v-if="scope.row.status === '通过' "
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click="handleUpdateStatus(scope.row)"
- v-hasPermi="['jnb:quotations:remove']"
- >查看
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- <pagination
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getList"
- />
- <!-- 添加或修改行情对话框 -->
- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="产品名称" prop="productName">
- <el-input v-model="form.productName" placeholder="请输入产品名称"/>
- </el-form-item>
- <el-form-item label="类型" prop="type">
- <el-cascader
- ref="cascader"
- v-model="form.type"
- :options="options"
- :props="{ checkStrictly: true ,emitPath: false, }"
- :show-all-levels="false"
- clearable>
- </el-cascader>
- </el-form-item>
- <el-form-item label="地区" prop="area">
- <el-input v-model="form.area" placeholder="请输入地区"/>
- </el-form-item>
- <el-form-item label="价格" prop="price">
- <el-input v-model="form.price" placeholder="请输入价格" type="number"/>
- </el-form-item>
- <el-form-item label="手机号" prop="phone">
- <el-input v-model="form.phone" placeholder="请输入手机号"/>
- </el-form-item>
- <el-form-item label="地址" prop="address">
- <el-input v-model="form.address" placeholder="请输入地址"/>
- </el-form-item>
- <el-form-item label="图片" prop="url">
- <image-upload v-model="form.url" width="100"/>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer" v-if="poppn">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </el-dialog>
- <el-dialog :title="title" :visible.sync="staK" width="500px" append-to-body>
- <el-form ref="forms" :model="forms" :rules="rules" label-width="80px">
- <el-form-item label="产品名称" prop="productName">
- <el-input v-model="forms.productName" placeholder="请输入产品名称" :disabled="true"/>
- </el-form-item>
- <el-form-item label="类型" prop="type">
- <el-cascader
- :disabled="true"
- ref="cascader"
- v-model="forms.type"
- :options="options"
- :props="{ checkStrictly: true ,emitPath: false, }"
- :show-all-levels="false"
- clearable>
- </el-cascader>
- </el-form-item>
- <el-form-item label="地区" prop="area">
- <el-input v-model="forms.area" placeholder="请输入地区" :disabled="true"/>
- </el-form-item>
- <el-form-item label="价格" prop="price">
- <el-input v-model="forms.price" placeholder="请输入价格" :disabled="true" type="number"/>
- </el-form-item>
- <el-form-item label="手机号" prop="phone">
- <el-input v-model="forms.phone" placeholder="请输入手机号" :disabled="true"/>
- </el-form-item>
- <el-form-item label="地址" prop="address">
- <el-input v-model="forms.address" placeholder="请输入地址" :disabled="true"/>
- </el-form-item>
- <el-form-item label="图片" prop="url">
- <template slot-scope="slot">
- <div v-for="(e,idx) in forms.url" :key="idx" style="display: flex;display: inline-block;justify-content: space-between;width: 120px">
- <img :src="urlExcuted(e)" width="200"/>
- </div>
- </template>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer" v-if="poppn" >
- <el-button type="primary" @click="submit('1')">通过</el-button>
- <el-button type="primary" @click="submit('2')">不通过</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import {
- addQuotations,
- delQuotations,
- getQuotations,
- listQuotations,
- updateQuotations,
- updateStatus
- } from "@/api/quotations/quotations";
- import {listConfig} from "@/api/quotations/config";
- import Img from "@/views/my/jnbImg.vue";
- export default {
- name: "Quotations",
- components: {Img},
- data() {
- // 数字校验
- let validateNumber = (rule, value, callback) => {
- const numberReg = /^[0-9]+.?[0-9]*$/;
- if (!numberReg.test(value)) {
- callback(new Error('请输入数字'));
- } else {
- callback();
- }
- }
- return {
- baseUrl: process.env.VUE_APP_BASE_API,
- // 类型下拉框选项
- options: [],
- // 遮罩层
- loading: true,
- // 选中数组
- ids: [],
- // 非单个禁用
- single: true,
- // 非多个禁用
- multiple: true,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 行情表格数据
- quotationsList: [],
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- staK: false,
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- productName: null,
- area: null,
- type: null,
- price: null,
- phone: null,
- address: null,
- url: null,
- urlArray: null
- },
- // 表单参数
- form: {},
- //审核参数
- forms: {},
- poppn: true,
- sta: {
- status: [{required: true, message: "请选择审核状态", trigger: "blur"}]
- },
- // 表单校验
- rules: {
- productName: [{required: true, message: "请输入产品名称", trigger: "blur"}],
- area: [{required: true, message: "请输入地区", trigger: "blur"}],
- price: [
- {required: true, message: "请输入价格", trigger: "blur"},
- {validator: validateNumber, trigger: 'blur'}
- ],
- phone: [{required: true, message: "请输入手机号", trigger: "blur", pattern: /^1[34578]\d{9}$/}],
- address: [{required: true, message: "请输入地址", trigger: "blur"}],
- url: [{required: true, message: "请输入图片", trigger: "blur"}]
- }
- };
- },
- created() {
- this.getList();
- },
- methods: {
- urlExcuted(val){
- return this.baseUrl + val
- },
- /** 查询行情列表 */
- getList() {
- this.loading = true;
- listConfig().then(response => {
- this.options = this.formatOptions(response.data.quotations);
- listQuotations(this.queryParams).then(response => {
- this.quotationsList = this.dataFormat(response.rows);
- this.quotationsList.url = response.rows.urlArray
- this.total = response.total;
- this.loading = false;
- });
- });
- },
- //转换为下拉选列表
- formatOptions(data) {
- return data.map(item => ({
- value: item.id,
- label: item.productName,
- children: item.children ? this.formatOptions(item.children) : null,
- }));
- },
- /*
- * el-cascader递归获取父级id
- * @param list 数据列表
- * @param id 后端返回的id
- * propsCascader 是el-cascader props属性
- **/
- getParentsById(list, id) {
- for (let item of list) {
- let valueKey = this.propsCascader ? this.propsCascader.value : 'value';
- if (item[valueKey] == id) {
- return [item[valueKey]]
- }
- if (item.children) {
- let node = this.getParentsById(item.children, id)
- if (node !== undefined) {
- // 追加父节点
- node.unshift(item[valueKey])
- return node
- }
- }
- }
- },
- dataFormat(rows) {
- // 创建一个映射对象,键是id,值是productName
- const idToProductName = this.options.reduce((acc, cur) => {
- acc[cur.value] = cur.label;
- return acc;
- }, {});
- return rows.map(item => {
- // 使用映射对象将type的值从id转换为productName
- item.type = idToProductName[item.type] || item.type;
- return item;
- });
- },
- // 取消按钮
- cancel() {
- this.open = false;
- this.staK = false;
- this.reset();
- },
- // 表单重置
- reset() {
- this.form = {
- id: null,
- productName: null,
- area: null,
- type: null,
- price: null,
- phone: null,
- address: null,
- url: null,
- createBy: null,
- createTime: null,
- updateBy: null,
- updateTime: null,
- remark: null,
- delFlag: null,
- configId: null
- };
- this.resetForm("form");
- this.forms = {
- status: null
- }
- this.resetForm("forms");
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getList();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.resetForm("queryForm");
- this.handleQuery();
- },
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.ids = selection.map(item => item.id)
- this.single = selection.length !== 1
- this.multiple = !selection.length
- },
- /** 新增按钮操作 */
- handleAdd() {
- this.poppn =true;
- this.reset();
- this.open = true;
- this.title = "添加行情";
- },
- /** 修改按钮操作 */
- handleUpdate(row) {
- this.reset();
- const id = row.id || this.ids
- getQuotations(id).then(response => {
- this.form = response.data;
- this.form.type = this.getParentsById(this.options, this.form.type)
- this.open = true;
- this.poppn = true;
- this.title = "修改行情";
- });
- },
- handleUpdateStatus(row) {
- this.reset();
- const id = row.id || this.ids
- getQuotations(id).then(response => {
- this.forms = response.data;
- debugger
- if (this.forms.url!==""&&this.forms.url!==null){
- this.forms.url = this.forms.url.split(',')
- }
- this.form.type = this.getParentsById(this.options, this.form.type)
- this.staK = true;
- this.poppn = false;
- this.title = "查看行情";
- });
- },
- /** 审核按钮*/
- updateStatus(row) {
- this.reset();
- const id = row.id
- getQuotations(id).then(response => {
- this.forms = response.data;
- if (this.forms.url!==""&&this.forms.url!==null){
- this.forms.url = this.forms.url.split(',')
- }
- this.forms.type = this.getParentsById(this.options, this.forms.type)
- this.staK = true;
- this.poppn = true;
- this.title = "行情审核";
- });
- },
- submit(status) {
- // 将createTime转换为Date对象
- let date = new Date(this.forms.createTime);
- // 使用toLocaleString方法将Date对象转换为"YYYY-MM-DD HH:MM:SS"格式
- this.forms.createTime = date.getFullYear() + '-' +
- ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
- ('0' + date.getDate()).slice(-2) + ' ' +
- ('0' + date.getHours()).slice(-2) + ':' +
- ('0' + date.getMinutes()).slice(-2) + ':' +
- ('0' + date.getSeconds()).slice(-2);
- this.forms.status = status;
- if (Array.isArray(this.forms.type)) {
- this.forms.type = this.forms.type[this.forms.type.length - 1]
- }
- //提交之前把forms.url数组转换为字符串用,拼接
- this.forms.url = this.forms.url.join(',')
- updateStatus(this.forms).then(response => {
- this.$modal.msgSuccess("修改成功");
- this.staK = false;
- this.getList();
- });
- },
- /** 提交按钮 */
- submitForm() {
- this.$refs["form"].validate(valid => {
- if (valid) {
- if (this.form.id != null) {
- //判断this.form.type是否是数组,如果是数组则取数组的最后一个值
- if (Array.isArray(this.form.type)) {
- this.form.type = this.form.type[this.form.type.length - 1]
- }
- updateQuotations(this.form).then(response => {
- this.$modal.msgSuccess("修改成功");
- this.open = false;
- this.getList();
- });
- } else {
- addQuotations(this.form).then(response => {
- this.$modal.msgSuccess("新增成功");
- this.open = false;
- this.getList();
- });
- }
- }
- });
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- const ids = row.id || this.ids;
- this.$modal.confirm('是否确认删除所选的数据项?').then(function () {
- return delQuotations(ids);
- }).then(() => {
- this.getList();
- this.$modal.msgSuccess("删除成功");
- }).catch(() => {
- });
- },
- }
- };
- </script>
|