行情后台管理,图片回显问题,输入框数字类型,审核按钮

src/views/quotations/index.vue

@@ -73,7 +73,7 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
-            v-if="scope.row.status !== '通过'"
+            v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -82,7 +82,7 @@
           >审核
           </el-button>
           <el-button
-            v-if="scope.row.status !== '通过'"
+            v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -91,7 +91,7 @@
           >修改
           </el-button>
           <el-button
-            v-if="scope.row.status !== '通过'"
+            v-if="scope.row.status !== '通过' && scope.row.status !== '不通过'"
             size="mini"
             type="text"
             icon="el-icon-delete"
@@ -100,7 +100,7 @@
           >删除
           </el-button>
           <el-button
-            v-if="scope.row.status == '通过'"
+            v-if="scope.row.status === '通过' "
             size="mini"
             type="text"
             icon="el-icon-delete"
@@ -119,24 +119,6 @@
       @pagination="getList"
     />
 
-    <el-dialog :title="title" :visible.sync="staK" width="500px" append-to-body>
-      <el-form ref="forms" :model="forms" :rules="sta" label-width="80px">
-        <el-form-item label="审核" prop="status">
-          <el-select v-model="forms.status">
-            <el-option
-              v-for="item in statusList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submit">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
     <!-- 添加或修改行情对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -157,7 +139,7 @@
           <el-input v-model="form.area" placeholder="请输入地区"/>
         </el-form-item>
         <el-form-item label="价格" prop="price">
-          <el-input v-model="form.price" placeholder="请输入价格"/>
+          <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="请输入手机号"/>
@@ -174,6 +156,51 @@
         <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)"/>
+            </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>
 
@@ -187,9 +214,11 @@ import {
   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) => {
@@ -201,17 +230,9 @@ export default {
       }
     }
     return {
+      baseUrl: process.env.VUE_APP_BASE_API,
       // 类型下拉框选项
       options: [],
-      statusList: [{
-        label: '审核通过',
-        value: '1'
-      },
-        {
-          label: '审核未通过',
-          value: '2'
-        },
-      ],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -270,18 +291,23 @@ export default {
     this.getList();
   },
   methods: {
+    urlExcuted(val){
+      return this.baseUrl + val
+    },
     /** 查询行情列表 */
     getList() {
       this.loading = true;
-      listQuotations(this.queryParams).then(response => {
-        this.quotationsList = response.rows;
-        this.quotationsList.url = response.rows.urlArray
-        this.total = response.total;
-        this.loading = false;
-      });
       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) {
@@ -313,6 +339,18 @@ export default {
         }
       }
     },
+    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;
@@ -382,9 +420,13 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getQuotations(id).then(response => {
-        this.form = response.data;
+        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.open = true;
+        this.staK = true;
         this.poppn = false;
         this.title = "查看行情";
       });
@@ -392,15 +434,19 @@ export default {
     /** 审核按钮*/
     updateStatus(row) {
       this.reset();
-      this.forms.id = row.id
-      this.forms.productName = row.productName
-      this.forms.createTime = row.createTime
-      this.staK = true;
-      this.title = "行情审核";
+      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() {
-      this.$refs["forms"].validate(valid => {
-        if (valid) {
+    submit(status) {
           // 将createTime转换为Date对象
           let date = new Date(this.forms.createTime);
           // 使用toLocaleString方法将Date对象转换为"YYYY-MM-DD HH:MM:SS"格式
@@ -410,14 +456,18 @@ export default {
             ('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 => {